Flexbox 가 (깨끗하게) 못 하는 layout: Grid 가 제 값 하는 자리

"Grid 는 Flexbox 의 '대신' 이 아냐. Flexbox 가 너를 싸우게 하는 것 위한 거."

Grid 가 가지는 여섯 패턴

일부 layout 이 창의적 중첩으로 Flexbox 에서 기술적으로 가능하지만, Grid 가 코드의 작은 일부로 표현. 이거 알아보고 Grid 로 직접 가.

1. Overlap 하는 hero content

배경 이미지와 위에 텍스트 가진 hero, flow 안 (position: absolute 없이). 둘 다 같은 grid 셀에 배치:

2. 제약된 layout 안 풀 너비 섹션

Max-width content column 가진 긴 article — 가끔의 이미지나 인용이 풀 viewport 너비 span 해야 함. Grid 없이는 중첩 wrapper 필요했음; Grid 로 column 셋 정의 (gutter / content / gutter), 기본적으로 가운데 column 에 모든 거 놓고, 풀 너비 항목은 column 1 / -1:

3. 매거진 스타일 비대칭 column

일부 항목이 column 2 span, 일부 column 3 span, 일부 풀 너비 — 페이지 걸쳐 row 정렬되는 layout. Grid 의 grid-column: span N 이 native 처리:

4. 변수 타일 크기 가진 대시보드

일부가 1x1 (작은 KPI), 일부 2x1 (차트), 일부 2x2 (큰 지도) 인 통계 타일. span 과 dense packing 가진 Grid 가 갭 없이 대시보드 채움:

5. `subgrid` 로 카드 간 정렬

모든 카드가 title, 이미지, footer 가진 카드 grid — 텍스트 길이 달라도 모든 title 이 수평 정렬되길 원함:

6. 변수 aspect ratio 가진 사진 갤러리

사진이 다른 크기 (wide landscape, tall portrait) 가진 사진 grid, 효율적으로 packed:

Grid + Flexbox 조합이 모던 표준. 페이지 구조와 타일 배치에 Grid 사용. 각 타일 안 content 정렬에 Flexbox 사용. 둘이 보완; 어느 것도 다른 거 대체 안 함.

Grid 가 안 하는 것 (그리고 Flexbox 가 하는 것)

Content 인식 sizing 으로 공간 균등 분배. Flexbox 의 flex: 1 + content 크기가 자연스럽게 함. Grid column 은 미리 정의.
예측 불가 너비의 항목 wrap. Flexbox flex-wrap 이 필요한 대로 wrap; Grid 가 정의된 column 구조로 wrap.
단일 축 배치. Navbar, 버튼 row, 단일 column 에 Flexbox 가 더 단순. 그것들에 Grid 는 overkill.

너의 mental model 이 "content 기반으로 너비 적응해야 할 N 개 항목의 row" 면 Flexbox. "내가 설계한 좌표 시스템으로 snap 하는 항목" 이면 Grid.

결정 휴리스틱

페이지 레벨 구조야? (Header, 사이드바, main, footer) → template-areas 가진 Grid.
아마 변수 크기 가진 타일 grid 야? → span/dense 가진 Grid.
항목이 두 축에서 셀 간 정렬 필요? → Grid (중첩 정렬에 subgrid).
항목이 overlap 하거나 셀 정밀 배치 필요? → Grid.
아니면? → Flexbox.

피파의 노트

Cwk-site 의 quest 상세 페이지가 페이지 구조에 Grid 사용 (template-areas: nav / main / meta), 각 영역 안에 Flexbox (nav 는 link 의 flex column; main 은 lesson 의 flex column; meta 는 metadata 블록의 flex column). 조합이 canonical 2026 패턴: 배치에 Grid, content 정렬에 Flexbox. 이 분할 인식이 layout 노력과 한 도구가 두 일 다 하라고 강제하려는 유혹 둘 다 절약.

Code

Flow 안 overlap (position: absolute 없이)·css

/* 1. Overlap 하는 hero content */
.hero {
  display: grid;
}
.hero > * {
  grid-area: 1 / 1;       /* 모든 자식이 같은 셀에 */
}
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.hero .content {
  z-index: 2;
  padding: 4rem;
  color: white;
  align-self: end;        /* 텍스트를 셀 바닥으로 밂 */
}

한 grid 안 제약 + 풀 너비·css

/* 2. 제약된 layout 의 풀 너비 섹션 */
.article {
  display: grid;
  grid-template-columns:
    1fr                       /* gutter */
    min(70ch, 100% - 2rem)   /* 가독 content column */
    1fr;                      /* gutter */
}
.article > * {
  grid-column: 2;             /* 기본적으로 모든 거 가운데 column 에 */
}
.article > .full-bleed {
  grid-column: 1 / -1;       /* hero 이미지, pull quote 가 풀 너비 span */
}

/* Markup:
<article class="article">
  <h1>The Article</h1>
  <p>가독 column 의 단락.</p>
  <img class="full-bleed" src="hero.jpg" alt="..." />
  <p>가독 column 으로 복귀.</p>
</article>
*/

span/dense + subgrid 정렬 가진 대시보드·css

/* 4. 변수 타일 크기 가진 대시보드 */
.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  grid-auto-flow: dense;     /* 갭 채움 */
  gap: 1rem;
}
.dashboard .kpi { /* 1x1 */ }
.dashboard .chart { grid-column: span 2; }       /* 2x1 */
.dashboard .map { grid-column: span 2; grid-row: span 2; }   /* 2x2 */

/* 5. subgrid 로 카드 간 정렬 */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 200px auto;   /* title | image | footer */
  gap: 1rem;
}
.cards .card {
  display: grid;
  grid-template-rows: subgrid;            /* 3 row 트랙 상속 */
  grid-row: span 3;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--bg-card);
}
/* Title 이 수평 정렬; 이미지 정렬; footer 정렬 */

Exercise

Grid 써서 긴 article 페이지 짓기: (1) 페이지 구조 (header / main / footer); (2) main 안에 좁은 column 탈출하는 풀 너비 이미지 가진 가독 텍스트 column; (3) 끝에 카드 4 개 가진 대시보드 스타일 'related articles' 섹션, 하나가 featured 2x1 크기. 카드의 자체 내부 layout 에 Flexbox 사용 (이미지 위, title 가운데, byline 바닥).

Hint

풀 너비 트릭은 3 column grid: 1fr | content-width | 1fr. 기본적으로 모든 거 column 2; 풀 너비 항목은 column 1/-1. Featured 카드는 related-articles grid 의 grid-column: span 2 사용.

Flexbox 가 (깨끗하게) 못 하는 layout: Grid 가 제 값 하는 자리

Grid 가 가지는 여섯 패턴

1. Overlap 하는 hero content

2. 제약된 layout 안 풀 너비 섹션

3. 매거진 스타일 비대칭 column

4. 변수 타일 크기 가진 대시보드

5. `subgrid` 로 카드 간 정렬

6. 변수 aspect ratio 가진 사진 갤러리

Grid 가 안 하는 것 (그리고 Flexbox 가 하는 것)

결정 휴리스틱

피파의 노트

Code

External links

Exercise

Progress

댓글 0