CSS Grid
Table of contents
Grid 속성
css
.parent {
grid-template-columns: 200px 200px 500px;
/* grid-template-columns: 1fr 1fr 1fr; */
/* grid-template-columns: repeat(3, 1fr); */
/* grid-template-columns: 200px 1fr; */
/* grid-template-columns: 100px 200px auto; */
grid-template-rows: 200px 200px 500px;
/* grid-template-rows: 1fr 1fr 1fr; */
/* grid-template-rows: repeat(3, 1fr); */
/* grid-template-rows: 200px 1fr; */
/* grid-template-rows: 100px 200px auto; */
grid-template-rows: repeat(3, minmax(100px, auto));
grid-template-columns: repeat(3, repeat(3, 1fr 2fr 1fr));
gap: ...;
row-gap: ...;
column-gap: ...;
grid-auto-flow: row;
/* grid-auto-flow: column; */
/* grid-auto-flow: dense; */
/* grid-auto-flow: row dense; */
/* grid-auto-flow: column dense; */
/* 각각의 아이템을 정렬 */
align-items: stretch | start | center | end;
justify-items: stretch | start | center | end;
/* 아이템들을 통째로 정렬 */
align-content: stretch | start | center | end | space-between | space-around | space-evenly;
justify-content: stretch | start | center | end | space-between | space-around | space-evenly;
}
.child {
/* 개별 아이템 정렬 */
align-self: stretch | start | center | end;
justify-self: stretch | start | center | end;
}
auto-fill & auto-fit
auto-fill 과 auto-fit 은 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는한 최대한 셀을 채운다.
css
.parent {
/* 최소 5 개의 컬럼 생성. 요소가 5개 미만인 경우 폭을 다 채우지 않음 */
grid-template-columns: repeat(auto-fill, minmax(20%, auto));
/* 최소 5 개의 컬럼 생성. 요소가 5개 미만인 경우 폭을 꽉 채움 */
grid-template-columns: repeat(auto-fit, minmax(20%, auto));
}
grid-auto-columns & grid-auto-rows
grid-auto-xxx 속성은 grid-template-xxx 의 통제를 벗어난 위치에 있는 트랙의 크기를 지정하는 속성이다.
css
.parent {
/* row 에 몇개의 행이 나오는지 모르는 상황에서 사용 */
grid-auto-rows: minmax(300px, auto);
}
Grid item 속성
grid-xxx-start, end
css
.item:nth-child(1) {
grid-column-start: 1;
grid-column-end: 3;
grid-column: 1 / 3;
grid-column: 1 / span 2;
grid-row-start: 1;
grid-row-end: 3;
grid-row: 1 / 3;
grid-row: 1 / span 2;
}
grid-template-areas, grid-template-area
css
.parent {
grid-template-areas:
'header header header'
'side-a main side-b'
'footer footer footer'
}
.header {
grid-area: header;
}
.side-a {
grid-area: side-a;
}
.main {
grid-area: main;
}
.side-b {
grid-area: side-b;
}
.footer {
grid-area: footer;
}