CSS Grid 레이아웃
완전 정복 가이드

CSS Grid란 무엇인가요?

행(row)과 열(column)을 동시에 다루는 웹의 2차원 레이아웃 시스템

웹 페이지를 만들다 보면 단순히 가로로 나열하는 것 이상이 필요할 때가 있어요. 헤더, 사이드바, 본문, 푸터가 격자처럼 맞물려야 하거나, 카드들이 깔끔하게 여러 열로 나뉘어야 하거나, 특정 요소가 여러 칸을 차지해야 하는 경우가 그래요. CSS Grid는 이런 2차원 레이아웃을 가장 명확하고 직관적으로 만들 수 있는 CSS 시스템이에요.

Grid는 부모(Container)에 display: grid를 선언하면 활성화돼요. 그러면 자식 요소(Item)들이 자동으로 격자 형태로 배치되고, grid-template-columns와 grid-template-rows로 각 칸의 크기를 자유롭게 지정할 수 있어요. 나아가 grid-template-areas를 사용하면 이름만으로 복잡한 레이아웃도 한눈에 그릴 수 있어요.

CSS Grid는 2017년 주요 브라우저에 정식 지원되기 시작했고, 지금은 전 세계 브라우저의 98% 이상에서 완벽하게 동작해요. float, table, 절대 위치 지정 없이도 복잡한 레이아웃을 단 몇 줄로 구현할 수 있는 시대가 된 거예요.

꼭 알아야 할 CSS Grid 속성 6가지

Container에 적용하는 속성들 — 이것만 알면 대부분의 그리드 레이아웃이 가능해요

grid-template-areas 시각화

자주 쓰는 CSS Grid 패턴 3가지

복붙하면 바로 쓸 수 있는 실전 코드

① 3열 카드 그리드

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3열, 균등 분배 */
  gap: 20px;
}

② 홈페이지 레이아웃 (header + sidebar + main + footer)

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

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

③ 반응형 카드 (auto-fill + minmax)

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* 각 칸 최소 250px, 최대 1fr (남은 공간 균등 분배) */
  /* 화면이 좁아지면 자동으로 열 수가 줄어들어요 */
  gap: 16px;
}

내 웹페이지에 CSS Grid로 3열 카드 레이아웃을 만들어줘.
- 카드 최소 너비 280px, 최대 1fr
- 카드 간격 20px
- 모바일에서는 1열로 변경 (768px 이하)
- 카드 hover 시 살짝 위로 올라오는 효과

직접 조작해보는 CSS Grid 데모

속성을 바꾸면 박스들이 실시간으로 변해요. 박스를 클릭하면 span 2를 토글해요.

자주 묻는 질문

CSS Grid를 쓰다 보면 꼭 만나는 궁금증

CSS Grid를 익혔다면

자연스럽게 이어지는 주제들로 실력을 넓혀봐요