HTML/CSS 3.4 · 3부. 배치

Grid 기초

가로와 세로를 함께 정합니다. 격자 목록과 화면 골격에 사용합니다.

예상 학습 시간 18분 예제를 고치면 화면이 그대로 다시 그려집니다 난이도 초급

개념 설명

가로 세로를 함께 정하기

Flexbox 는 한 방향으로 늘어놓습니다. 가로면 가로, 세로면 세로입니다. Grid 는 가로와 세로를 함께 정합니다.

	Flexbox	Grid
방향	한 방향	가로 · 세로 동시에
정하는 것	항목이 어떻게 늘고 줄지	칸을 먼저 나누고 그 안에 배치
맞는 자리	차림표, 단추 줄, 한 줄 배치	화면 전체 골격, 격자 목록

둘 중 하나를 고르는 것이 아닙니다. 화면 골격은 Grid 로 잡고, 그 안의 머리말은 Flexbox 로 배치하는 식으로 함께 사용합니다.

최소 예제 · 편집 가능

열을 나누기

grid-template-columns 에 열의 개수와 너비를 적습니다. 적은 개수만큼 열이 생기고, 항목은 왼쪽 위부터 차례로 채워집니다.

<div class="g1">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
</div>

.g1 {
  display: grid;
  /* 세 열입니다. fr 은 남는 자리를 나누는 단위입니다. */
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.cell {
  background: #ece7fb;
  padding: 18px;
  border-radius: 6px;
  text-align: center;
}

다섯 항목을 세 열에 넣었더니 두 줄이 되었습니다. 줄은 적지 않아도 필요한 만큼 생깁니다.

상세 사용법

너비를 적는 방법

적는 법	뜻
`200px 1fr`	첫 열은 200px 고정, 둘째 열이 남는 자리를 모두 가집니다.
`1fr 2fr`	남는 자리를 1:2 로 나눕니다.
`repeat(3, 1fr)`	`1fr 1fr 1fr` 과 같습니다.
`minmax(160px, 1fr)`	최소 160px, 자리가 있으면 늘어납니다.
`auto`	내용만큼입니다.

fr 은 Grid 에서만 쓰는 단위로, 남는 자리를 나누는 몫입니다. % 와 달리 gap 을 뺀 나머지를 나누므로 계산이 어긋나지 않습니다.

최소 예제 · 편집 가능

폭에 따라 열 수가 바뀌는 격자

auto-fit 과 minmax 를 함께 쓰면 미디어 쿼리 없이 열 수가 바뀝니다. 미리보기를 좁히면 열이 줄어듭니다.

<div class="auto">
  <div class="cell">상품 1</div>
  <div class="cell">상품 2</div>
  <div class="cell">상품 3</div>
  <div class="cell">상품 4</div>
  <div class="cell">상품 5</div>
  <div class="cell">상품 6</div>
</div>

.auto {
  display: grid;
  /* 들어갈 만큼 열을 만들되, 한 열은 최소 150px */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

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

auto-fill 이라는 값도 있습니다. 항목이 모자랄 때 auto-fit 은 빈 열을 접어 남은 항목이 넓어지고, auto-fill 은 빈 열을 그대로 둡니다.

상세 사용법

줄 높이

style.css

/* 줄을 직접 정할 수도 있습니다 */
grid-template-rows: 80px 1fr 60px;

/* 적지 않은 줄이 생길 때의 높이 */
grid-auto-rows: minmax(100px, auto);

/* 가로 세로 간격을 따로 */
gap: 10px 20px;   /* 줄 사이 10, 열 사이 20 */

줄 높이는 대개 적지 않습니다. 내용에 맞춰 저절로 정해지는 편이 안전합니다.

흔한 실수

세 가지

열 너비에 % 를 쓰고 gap 을 줍니다. 33.3% × 3 + gap 이 100% 를 넘어 넘칩니다. fr 은 간격을 뺀 나머지를 나누므로 그런 일이 없습니다.
항목에 width 를 줍니다. 칸의 너비는 부모가 정합니다. 항목에 너비를 주면 칸 안에서 그만큼만 차지해 격자가 어긋나 보입니다.
Flexbox 로 격자를 만들려 합니다. 줄바꿈으로 흉내 낼 수 있지만 마지막 줄의 항목이 늘어나 크기가 어긋납니다. 격자는 Grid 가 맞습니다.

실습 문제

직접 해보기

1. 두 칸 배치 난이도 중

왼쪽에 200px 고정 폭 곁줄을, 오른쪽에 남는 자리를 모두 차지하는 본문을 두십시오. 사이는 20px 띄웁니다.

열을 둘로 나누되 하나는 고정 값, 하나는 1fr 입니다.

.layout { display: grid; grid-template-columns: 200px 1fr; gap: 20px; }

요약

정리

Grid 는 가로와 세로를 함께 정합니다. Flexbox 는 한 방향입니다.
grid-template-columns 에 적은 개수만큼 열이 생깁니다.
fr 은 간격을 뺀 나머지를 나눕니다.
repeat(auto-fit, minmax(150px, 1fr)) 은 폭에 따라 열 수가 바뀝니다.