CSS Grid 치트시트 (그리드 레이아웃 정리)
grid-template-columns, fr 단위, repeat, gap, grid-area 등 CSS Grid 핵심 속성을 2차원 레이아웃 관점에서 정리한 치트시트입니다.
Grid는 행과 열을 동시에 다루는 2차원 레이아웃입니다. 컨테이너에 display: grid를 줍니다.
열·행 정의
<div style="display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px;">
<div>1</div><div>2</div><div>3</div>
</div>
| 속성 | 예시 | 효과 |
|---|---|---|
grid-template-columns | 1fr 2fr | 열 너비 비율 |
grid-template-rows | auto 1fr | 행 높이 |
gap | 12px / 12px 8px | 행·열 간격 |
repeat(3, 1fr) | — | 같은 값 반복 |
fr 단위와 반응형
fr은 남는 공간의 비율입니다. 카드 그리드는 보통 다음 한 줄로 반응형이 됩니다.
<div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap:10px;">
<div style="background:#eef;padding:16px">A</div>
<div style="background:#eef;padding:16px">B</div>
<div style="background:#eef;padding:16px">C</div>
</div>
auto-fill + minmax는 "최소 120px, 공간 남으면 늘리고, 부족하면 줄바꿈"을 자동 처리합니다.
아이템 배치
| 속성 | 효과 |
|---|---|
grid-column: 1 / 3 | 1번~3번 라인까지 차지(2칸) |
grid-row: 1 / 3 | 행 방향 2칸 |
grid-column: span 2 | 2칸 차지 |
Flexbox는 한 방향, Grid는 두 방향. 한 줄 정렬이면 Flexbox, 행·열을 동시에 배치하면 Grid가 적합합니다.