CSS Grid — 2차원 레이아웃의 답

이 토픽을 마치면

CSS Grid로 행과 열 기반의 레이아웃을 잡는 방법을 이해하게 됩니다.

Flexbox만으로는 부족한 순간

Flexbox는 1차원입니다. 가로 또는 세로, 한 방향으로만 아이템을 배치합니다. 하지만 대시보드처럼 행과 열 모두 제어해야 하는 레이아웃에서는 한계가 있습니다.

CSS Grid는 2차원 레이아웃 시스템입니다. 행(row)과 열(column)을 동시에 정의하고, 아이템을 원하는 칸에 배치합니다.

기본 사용법

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 60px 1fr 40px;
  gap: 16px;
}

3열 3행 레이아웃입니다. 1fr은 남은 공간을 차지하라는 뜻입니다(fraction). 왼쪽 200px, 가운데 나머지, 오른쪽 200px.

fr 단위

grid-template-columns: 1fr 2fr 1fr;

남은 공간을 비율로 나눕니다. 1:2:1이므로 가운데 열이 양쪽의 두 배 너비를 가집니다. px와 섞어 쓸 수도 있습니다:

grid-template-columns: 250px 1fr;

왼쪽은 고정 250px, 오른쪽은 나머지 전부.

repeat — 반복 패턴

같은 열을 여러 번 쓸 때:

/* 같은 표현 */
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(4, 1fr);

반응형 카드 그리드:

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

"최소 250px, 남으면 균등 분배, 공간이 부족하면 줄 바꿈." 이 한 줄로 반응형 카드 그리드가 완성됩니다. 미디어 쿼리 없이.

아이템 배치

특정 아이템을 원하는 칸에 배치할 수 있습니다:

.header {
  grid-column: 1 / -1; /* 1번 줄부터 마지막 줄까지 (전체 너비) */
}

.sidebar {
  grid-row: 2 / 4; /* 2번 줄부터 4번 줄까지 (2행 차지) */
}

grid-column: 1 / 3은 1번 세로선에서 3번 세로선까지, 즉 2칸을 차지합니다. -1은 마지막 선입니다.

grid-template-areas — 시각적 배치

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 150px;
  grid-template-rows: 60px 1fr 40px;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

CSS에서 레이아웃의 모양을 그림처럼 그릴 수 있습니다.

Grid vs Flexbox

둘 다 쓰면 됩니다. 역할이 다릅니다:

Flexbox: 한 방향 배치. 네비게이션 바, 버튼 그룹, 카드 안의 내용 정렬. Grid: 행과 열 동시 제어. 페이지 전체 레이아웃, 대시보드, 카드 그리드.

보통 큰 레이아웃은 Grid로 잡고, 안의 작은 요소들은 Flexbox로 정렬합니다.

핵심

CSS Grid는 행과 열을 동시에 제어하는 2차원 레이아웃 시스템입니다. fr 단위로 남은 공간을 비율로 나누고, repeat(auto-fill, minmax(...))로 반응형 그리드를 만듭니다. 큰 레이아웃은 Grid, 작은 요소 정렬은 Flexbox가 일반적입니다.