place-content
- justify-content(수평방향)와 align-content(수직방향)의 작동방식은 flex와 같음
- place-items과 다른점은 items는 박스 한개한개에 대해서 위치를 조정하지만, content는 grid 전체에 대한 위치를 조정함
- grid에서는 place-content로 수평, 수직방향을 한꺼번에 입력 가능
<body class="grid">
<div class="header">header</div>
<div class="content">content</div>
<div class="nav">nav</div>
<div class="footer">foote</div>
<div class="header">header</div>
<div class="content">content</div>
<div class="nav">nav</div>
<div class="footer">foote</div>
<div class="header">header</div>
<div class="content">content</div>
<div class="nav">nav</div>
<div class="footer">foote</div>
<div class="header">header</div>
<div class="content">content</div>
<div class="nav">nav</div>
<div class="footer">foote</div>
</body>
.grid {
display: grid;
gap: 5px;
height: 100vh;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
place-content: end center;
}
.header {
background-color: #2ecc71;
}
.content {
background-color: #3498db;
}
.nav {
background-color: #8e44ad;
}
.footer {
background-color: #f39c12;
}
댓글남기기