행과 열을 동시에 정의해 아이템을 배치하는 2차원 레이아웃 방식. 컨테이너가 트랙(Track, 행·열)의 크기를 정하고 아이템은 그 칸에 들어간다.
트랙 정의
grid-template-columns·grid-template-rows로 트랙을 만든다. 고정 길이,auto(콘텐츠 크기),fr(fraction, 남은 공간의 몫)을 섞어 쓸 수 있다.fr은 전체가 아니라 남은 공간을 나눈다gap(row-gap,column-gap)으로 트랙 사이 간격.fr단위는 쓸 수 없다repeat(3, 1fr)로 반복,minmax(100px, auto)로 최소·최대 크기- 명시적으로 정의하지 않은 줄에 아이템이 넘치면 암시적 트랙(Implicit Track)이 생긴다. 그 크기는
grid-auto-rows·grid-auto-columns로 정한다
/* 들어가는 만큼 열을 만들고 남은 공간은 나눠 갖기 */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}배치
- 라인 번호(Grid Line): 라인은 1부터 센다.
grid-column: 1 / 3은 1번 라인부터 3번 라인까지(두 칸).-1은 명시적 그리드의 마지막 라인이다.span 2처럼 칸 수로도 쓴다 - 영역 이름(Grid Area):
grid-template-areas로 레이아웃을 그림처럼 적는다. 같은 이름을 반복하면 칸이 합쳐지고, 빈칸은.으로 둔다. 영역은 반드시 직사각형이어야 한다. CSS만 봐도 배치가 보여서 반응형에서 미디어 쿼리(Media Query)마다 영역만 바꾸기 좋다
body { grid-template-areas: "header" "nav" "main" "footer"; }
@media (min-width: 40em) {
body {
grid-template-columns: 12em 1fr;
grid-template-areas: "header header" "nav main" "nav footer";
}
}
header { grid-area: header; }- 겹쳐 쌓기: 여러 아이템에
grid-area: 1 / 1을 주면 같은 칸에 겹친다.position: absolute없이 겹치는 레이아웃을 만들 수 있다
Flexbox와 언제 무엇을 쓸지는 Flexbox와 Grid 비교, 가운데 정렬은 CSS 가운데 정렬 참고.