CSS Grid 레이아웃 마스터하기

Flexbox가 1차원(행 또는 열) 레이아웃을 다룬다면, CSS Grid는 행과 열을 동시에 제어하는 2차원 레이아웃 시스템입니다. 복잡한 페이지 레이아웃을 float이나 position 없이 깔끔하게 구현할 수 있습니다.

Grid 기본 개념

.container {
  display: grid;

  /* 3개의 열: 각각 1fr(가용 공간의 1/3) */
  grid-template-columns: 1fr 1fr 1fr;
  /* 단축: repeat(3, 1fr) */

  /* 행 높이 자동 (내용에 맞춤) */
  grid-template-rows: auto;

  /* 셀 간격 */
  gap: 1rem;
  /* row-gap: 1rem; column-gap: 2rem; 로 개별 설정 가능 */
}

fr 단위와 고정 크기 혼합

.layout {
  display: grid;
  /* 사이드바 240px 고정, 나머지는 메인 영역 */
  grid-template-columns: 240px 1fr;
  /* 헤더 64px, 본문 자동, 푸터 60px */
  grid-template-rows: 64px 1fr 60px;
  min-height: 100vh;
  gap: 0;
}

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

레이아웃을 ASCII 아트처럼 직관적으로 정의할 수 있습니다.

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 64px 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; }

아이템 배치 제어

/* 특정 아이템이 여러 셀을 차지하게 하기 */
.featured {
  grid-column: 1 / 3;  /* 1번 줄부터 3번 줄까지 (2칸) */
  grid-row: 1 / 3;     /* 1번 줄부터 3번 줄까지 (2행) */
}

/* span 키워드 사용 */
.wide  { grid-column: span 2; } /* 2칸 차지 */
.tall  { grid-row: span 3; }    /* 3행 차지 */

반응형 그리드 — auto-fill & minmax

화면 크기에 따라 자동으로 열 수가 조정되는 반응형 그리드를 미디어 쿼리 없이 구현할 수 있습니다.

.card-grid {
  display: grid;
  /* 최소 280px, 최대 1fr로 자동으로 열 수 결정 */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* auto-fill: 공간이 남아도 빈 셀 유지 */
/* auto-fit:  남는 공간을 기존 아이템이 채움 */

정렬 제어

.grid {
  display: grid;
  grid-template-columns: repeat(3, 200px);

  /* 전체 그리드 정렬 (컨테이너 기준) */
  justify-content: center;  /* 가로 */
  align-content: center;    /* 세로 */

  /* 셀 내부 아이템 정렬 */
  justify-items: center;
  align-items: center;
}

/* 개별 아이템 정렬 오버라이드 */
.special {
  justify-self: end;
  align-self: start;
}

실전: 블로그 카드 그리드

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

/* 첫 번째 카드를 가로 전체로 */
.post-card:first-child {
  grid-column: 1 / -1; /* -1은 마지막 줄 */
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px) {
  .post-card:first-child {
    grid-template-columns: 1fr;
  }
}