Grid 배치

어느 칸에 놓을지 정하기

3.4 에서는 항목이 왼쪽 위부터 차례로 채워졌습니다. 이 단원에서는 어느 칸에 놓을지와 몇 칸을 차지할지를 정합니다.

방법이 둘입니다. 줄 번호로 적는 것과 영역에 이름을 붙이는 것입니다.

줄 번호로 놓기

Grid 는 칸이 아니라 선에 번호를 매깁니다. 세 열이면 선은 넷입니다 (1 · 2 · 3 · 4). 항목은 어느 선에서 어느 선까지인지로 적습니다.

<div class="g">
  <div class="cell wide">1~3 (두 칸)</div>
  <div class="cell">셋째 칸</div>
  <div class="cell">다음 줄</div>
  <div class="cell tall">두 줄 차지</div>
  <div class="cell">나머지</div>
</div>

.g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* 1번 선에서 3번 선까지 — 두 칸입니다 */
.wide { grid-column: 1 / 3; }

/* span 2 라고 적어도 됩니다 — 두 줄을 차지합니다 */
.tall { grid-row: span 2; }

.cell { background: #ece7fb; padding: 14px; border-radius: 6px; }

-1 은 마지막 선입니다. 열이 몇 개든 한 줄을 통째로 차지하게 하려면 1 / -1 이 편합니다.

영역에 이름 붙이기

번호 대신 이름으로 적을 수 있습니다. 화면 골격을 잡을 때는 이쪽이 읽기 쉽습니다 — CSS 만 보고도 배치가 그려집니다.

<div class="page">
  <header>머리말</header>
  <nav>차림표</nav>
  <main>본문입니다</main>
  <footer>꼬리말</footer>
</div>

.page {
  display: grid;
  grid-template-columns: 140px 1fr;
  /* 한 줄이 한 줄입니다. 같은 이름을 이으면 그만큼 넓어집니다. */
  grid-template-areas:
    "head head"
    "side main"
    "foot foot";
  gap: 8px;
}

header { grid-area: head; }
nav    { grid-area: side; }
main   { grid-area: main; }
footer { grid-area: foot; }

.page > * { background: #ece7fb; padding: 14px; border-radius: 6px; }

이름을 적은 글자 모양이 곧 배치입니다. 위 CSS 를 보면 머리말이 전체 폭, 가운데 줄이 두 칸, 꼬리말이 전체 폭이라는 것이 눈에 들어옵니다.

빈 칸을 두려면 그 자리에 마침표를 적습니다 — "side .".

칸 안에서의 정렬

Grid 도 Flexbox 처럼 정렬 속성이 있습니다. 이름이 비슷해 헷갈리기 쉽습니다.

기본값은 stretch 라 항목이 칸을 가득 채웁니다. 대개 그대로 두면 됩니다.

세 가지

• 선 번호를 칸 번호로 생각합니다. 세 열의 첫 칸은 1 / 2 입니다. 1 / 1 이라고 적으면 크기가 없어 배치가 어긋납니다.
• 영역 이름의 줄 수가 열 수와 맞지 않습니다. 한 줄에 적는 이름의 개수는 열 개수와 같아야 합니다. 하나라도 어긋나면 grid-template-areas 전체가 무시됩니다.
• 이름에 따옴표를 빠뜨립니다. 각 줄을 따옴표로 감싸야 합니다.

직접 해보기

정리

• Grid 는 칸이 아니라 선에 번호를 매깁니다. 세 열이면 선은 넷입니다.
• grid-column: 1 / -1 은 열 수와 상관없이 한 줄 전체입니다.
• grid-template-areas 는 적은 글자 모양이 곧 배치입니다.
• 한 줄의 이름 개수는 열 개수와 같아야 합니다.