그리드 기초

grid-template-columns: repeat(3, 1fr) 한 줄이면 너비가 같은 열 세 개가 생기고, 브라우저가 자식을 하나씩 다음 빈 칸에 넣습니다.

행과 열을 한꺼번에

그리드(CSS Grid Layout 모듈)는 행과 열을 함께 다루는 2차원 배치를 위해 만들어졌습니다. 컨테이너에 격자를 그리면 항목이 그 칸에 들어갑니다. 플렉스박스가 항목에서 출발해 크기를 스스로 정하게 한다면, 그리드는 배치에서 출발해 항목을 그 안에 맞춥니다. 그래서 사진 갤러리, 카드 목록, 그리고 머리말·옆단·본문·꼬리말로 이루어진 페이지 전체의 모양을 만들 때 가장 자연스럽게 쓸 수 있습니다.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* three equal columns */
  gap: 10px;
}
.gallery .wide { grid-column: span 2; }    /* this item covers two columns */

트랙과 fr 단위

grid-template-columns에는 열 하나하나, 그러니까 트랙마다의 너비를 나열합니다. 200px 1fr처럼 어떤 길이든 쓸 수 있지만, 그리드에는 자기만의 단위 fr가 있습니다. 남는 공간의 한 몸입니다. 1fr 1fr 1fr는 너비가 같은 열 세 개, 2fr 1fr는 첫 열이 둘째 열의 두 배입니다. fr는 고정 트랙과 간격을 빼고 남은 공간만 나누므로, 200px 1fr는 200픽셀 옆단을 두고 나머지를 본문 열에 줍니다. repeat(3, 1fr)는 1fr 1fr 1fr를 짧게 쓴 것입니다. grid-template-rows는 행에 같은 일을 하지만, 행은 내용만큼 높아지도록 놓아두는 경우가 많습니다.

항목 배치하기

기본으로 항목은 HTML 순서대로 한 칸씩, 왼쪽에서 오른쪽으로 채우고 다음 행으로 넘어갑니다. 항목을 크게 하려면 grid-column: span 2로 두 열을, grid-row: span 2로 두 행을 차지하게 합니다. 트랙 사이의 선에는 1부터 번호가 붙어서, 3열 그리드에는 선이 1에서 4까지 있고, grid-column: 1 / 3은 선 1에서 선 3까지라는 뜻입니다. 음수는 끝에서부터 세므로 grid-column: 1 / -1은 항목을 전체 너비로 늘립니다.

영역에 이름 붙이기

페이지 배치에는 grid-template-areas로 배치를 낱말로 그릴 수 있습니다. 따옴표로 감싼 문자열 하나가 한 행이고 낱말 하나가 한 칸이며, 같은 낱말을 되풀이하면 그 영역이 여러 칸을 차지합니다. 그다음 항목마다 같은 이름으로 grid-area를 줍니다. 아래 배치는 거의 스케치처럼 읽힙니다. 맨 위에 머리말, 그 아래 옆단과 본문이 나란히, 맨 아래에 꼬리말입니다. 휴대전화용 배치로 바꾸려면 이 몇 줄의 문자열만, 대개 미디어 쿼리 안에서 다시 쓰면 됩니다.

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "head head"
    "side main"
    "foot foot";
  gap: 16px;
}
header { grid-area: head; }
aside  { grid-area: side; }
main   { grid-area: main; }
footer { grid-area: foot; }

화면에 맞추는 열

MDN 그리드 안내에 나오는 패턴 하나는 외워 둘 만합니다. grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))입니다. minmax(150px, 1fr)는 열마다 최소 150픽셀이고 공간을 나눠 더 넓어져도 된다는 뜻이고, auto-fill은 들어가는 만큼 열을 만듭니다. 그러면 휴대전화에서는 2열, 넓은 화면에서는 5~6열이 되는 갤러리가 미디어 쿼리 없이 만들어집니다. 플렉스박스와 마찬가지로 그리드도 항목을 HTML과 다른 순서로 놓을 수 있고, 같은 주의가 필요합니다. 읽는 순서와 보이는 순서를 같게 유지하세요.