place-items
justify-items
<body class="grid">
<div class="header">header</div>
<div class="content">content</div>
<div class="nav">nav</div>
<div class="footer">foote</div>
</body>
stretch : grid를 늘려서 grid container를 채우게 한다.
.grid {
display: grid;
gap: 5px;
height: 50vh;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
justify-items: stretch;
}
.header {
background-color: #2ecc71;
}
.content {
background-color: #3498db;
}
.nav {
background-color: #8e44ad;
}
.footer {
background-color: #f39c12;
}
start : item을 cell 시작에 배치한다.
- item들이 세로로는 늘어나지만 가로로는 늘어나진 않음
center : item을 cell 중앙에 배치한다.
end : item을 cell 끝에 배치한다.
align-items
.grid {
display: grid;
gap: 5px;
height: 50vh;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
align-items: center;
}
- 아이템들의 배치방향이 세로로 바뀌었고, 가로로는 쭉 늘리지만 세로로는 늘리지 않음
- stretch가 default이며 start, end의 적용방식은 jsutify-items같음
justify-items+ align-items
.grid {
display: grid;
gap: 5px;
height: 50vh;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
justify-items: end;
align-items: end;
}
- html에서 상자에 글자를 입력해서 보이는거임.
자식들에게 너비와 높이를 설정해줬을 때
<body class="grid">
<div class="header"></div>
<div class="content"></div>
<div class="nav"></div>
<div class="footer"></div>
</body>
.grid {
display: grid;
gap: 5px;
height: 50vh;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
justify-items: stretch;
align-items: stretch;
}
.header {
background-color: #2ecc71;
height: 40px;
width: 40px;
}
.content {
background-color: #3498db;
height: 40px;
width: 40px;
}
.nav {
background-color: #8e44ad;
height: 40px;
width: 40px;
}
.footer {
background-color: #f39c12;
height: 40px;
width: 40px;
}
place-items: (수직) (수평);
<body class="grid">
<div class="header">header</div>
<div class="content">content</div>
<div class="nav">nav</div>
<div class="footer">footer</div>
</body>
.grid {
display: grid;
gap: 5px;
height: 50vh;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
place-items: stretch / center;
}
.header {
background-color: #2ecc71;
}
.content {
background-color: #3498db;
}
.nav {
background-color: #8e44ad;
}
.footer {
background-color: #f39c12;
}
댓글남기기