CSS Grid 레이아웃 완전 가이드

CSS Grid란?

CSS Grid는 웹에서 2차원(행 + 열) 레이아웃을 만드는 표준 방법입니다. Flexbox가 한 방향(1차원) 배치에 특화되었다면, Grid는 행과 열을 동시에 제어할 수 있어서 복잡한 페이지 구조를 훨씬 쉽게 만들 수 있습니다.

기본 구조

Grid도 Flexbox처럼 컨테이너와 아이템으로 구성됩니다.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 3등분 */
  gap: 16px;
}

이 3줄만으로 균등한 3열 그리드가 완성됩니다. fr은 "fraction"의 약자로, 남은 공간을 비율로 나눕니다.

grid-template-columns: 열 정의

/* 고정 너비 */
grid-template-columns: 200px 200px 200px;

/* 비율 */
grid-template-columns: 1fr 2fr 1fr;  /* 1:2:1 비율 */

/* 혼합 */
grid-template-columns: 250px 1fr;  /* 사이드바 250px + 나머지 */

/* repeat() 함수 */
grid-template-columns: repeat(3, 1fr);  /* 1fr 1fr 1fr */

/* 반응형 자동 채우기 */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

마지막 줄이 가장 중요합니다. auto-fill과 minmax()를 조합하면 미디어 쿼리 없이도 반응형 그리드가 만들어집니다.

grid-template-rows: 행 정의

.container {
  display: grid;
  grid-template-rows: 80px 1fr 60px;  /* 헤더 80px, 본문 나머지, 푸터 60px */
  min-height: 100vh;
}

1fr을 사용하면 남은 공간을 자동으로 차지하므로, 풀 하이트 레이아웃을 쉽게 만들 수 있습니다.

gap: 간격

.container {
  display: grid;
  gap: 16px;         /* 행 간격, 열 간격 동일 */
  gap: 20px 16px;    /* 행 간격 20px, 열 간격 16px */
  row-gap: 20px;     /* 행 간격만 */
  column-gap: 16px;  /* 열 간격만 */
}

Grid 아이템 배치

Grid의 가장 강력한 기능은 아이템을 원하는 위치에 정확히 배치할 수 있다는 점입니다.

.item {
  grid-column: 1 / 3;  /* 1번 라인부터 3번 라인까지 (2칸 차지) */
  grid-row: 1 / 2;     /* 1번 행에 배치 */
}

/* 단축 표현 */
.item {
  grid-column: span 2;  /* 2칸 차지 */
}

grid-template-areas: 이름으로 배치

가장 직관적인 레이아웃 방법입니다. 각 영역에 이름을 붙이고, 그림처럼 배치할 수 있습니다.

.container {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

코드만 봐도 레이아웃이 머릿속에 그려집니다. 이것이 Grid의 가장 큰 장점입니다.

정렬

Grid에서도 Flexbox와 비슷한 정렬 속성을 사용합니다.

.container {
  /* 셀 안에서 모든 아이템 정렬 */
  justify-items: center;  /* 가로 */
  align-items: center;    /* 세로 */

  /* 그리드 전체 정렬 (컨테이너에 여유 공간이 있을 때) */
  justify-content: center;
  align-content: center;
}

/* 개별 아이템 정렬 */
.item {
  justify-self: end;
  align-self: start;
}

실전 패턴 1: 반응형 카드 그리드

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

이 한 줄이면 화면 크기에 따라 자동으로 열 수가 조절됩니다. 미디어 쿼리가 필요 없습니다.

실전 패턴 2: Holy Grail 레이아웃

웹 디자인의 고전적인 레이아웃 — 헤더, 사이드바, 메인, 푸터를 Grid로 구현합니다.

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
  min-height: 100vh;
}

/* 모바일에서는 1열로 */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "nav"
      "main"
      "footer";
  }
}

실전 패턴 3: 대시보드

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.widget-large  { grid-column: span 2; grid-row: span 2; }
.widget-wide   { grid-column: span 2; }
.widget-normal { grid-column: span 1; }

auto-fill vs auto-fit

둘 다 반응형 그리드에 쓰이지만, 미묘한 차이가 있습니다.

• auto-fill: 빈 공간이 남으면 보이지 않는 빈 트랙을 생성
• auto-fit: 빈 공간이 남으면 기존 아이템이 늘어나서 채움

아이템이 적을 때 화면을 꽉 채우고 싶으면 auto-fit, 일정한 크기를 유지하고 싶으면 auto-fill을 사용하세요.

subgrid (최신 기능)

자식 그리드가 부모 그리드의 라인을 그대로 사용할 수 있는 기능입니다.

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.child {
  display: grid;
  grid-column: span 3;
  grid-template-columns: subgrid;  /* 부모의 3열 그대로 사용 */
}

카드 안의 요소들이 다른 카드와 정확히 정렬되어야 할 때 유용합니다.

정리

CSS Grid 핵심:

1. display: grid — 시작
2. grid-template-columns — 열 구조
3. grid-template-areas — 직관적 배치
4. repeat(auto-fill, minmax()) — 반응형의 정석
5. gap — 간격
6. grid-column/row: span N — 아이템 크기 조절

Flexbox와 Grid를 상황에 맞게 사용하면 어떤 레이아웃이든 만들 수 있습니다.