Foundations · 01
Grid
컨테이너 · 컬럼 그리드 · 간격(gap) · 브레이크포인트. 모든 레이아웃의 출발점이며, 새 페이지는 반드시 여기서 시작합니다.
Layout system은 Foundations에, Grid 컴포넌트는 Components에.
이 페이지는 레이아웃 시스템 — 컨테이너·간격·브레이크포인트·기본 컬럼 프리셋 — 만 다룹니다.
Geist의 <Grid> 컴포넌트(solid cells · row/column guides · overlaying cells · responsive grid 변형)는 Components → Grid로 분리되어 있습니다.
Containers
콘텐츠의 최대 너비를 정의합니다. 0 var(--sp-2xl)의 좌우 패딩이 자동 적용되며, 좌우 가운데 정렬됩니다.
| Class | Max width | Padding (좌우) | 용도 |
|---|---|---|---|
.container-sm | 800px | 32px | 읽기 중심 본문 · FAQ · 폼 |
.container | 1200px | 32px | 기본 — 대부분의 섹션 |
.container-lg | 1440px | 32px | 풀폭 hero · 갤러리 · 대형 그리드 |
Grid presets
3가지 컬럼 그리드 — 960px 이하에서 자동으로 1열로 무너집니다. 더 복잡한 그리드는 페이지 <style>에서 grid-template-columns로 정의.
| Class | Columns | Gap | ≤960px 거동 |
|---|---|---|---|
.grid-2 | 2 | 48px (--sp-3xl) | 1열 · gap 24px |
.grid-3 | 3 | 32px (--sp-2xl) | 1열 · gap 24px |
.grid-4 | 4 | 24px (--sp-xl) | 1열 · gap 24px |
.grid-2
.grid-3
.grid-4
Gap · Spacing
4px 베이스 스케일. 그리드의 gap, 요소 간 간격, padding 모두 같은 토큰을 사용해 시각 리듬을 만듭니다.
Section padding
섹션의 위·아래 여백. 페이지 흐름의 호흡을 결정합니다.
| Class | Vertical padding | 용도 |
|---|---|---|
.section-sm | 64px (--sp-4xl) | 좁은 섹션 · stats · footer band |
.section | 96px (--sp-5xl) | 기본 — 대부분의 콘텐츠 섹션 |
.section-lg | 128px (--sp-6xl) | 호흡이 큰 hero · 강조 섹션 |
Breakpoints
시스템에 정의된 미디어 쿼리. 새 페이지에서 추가 BP가 필요하면 가능한 한 이 값에 맞춥니다.
| Breakpoint | 적용 대상 | 거동 |
|---|---|---|
| ≤ 960px | .grid-2 .grid-3 .grid-4 .option-cards | 1열로 무너짐 · gap 24px |
| ≤ 820px | .carousel-rail | 카드 너비 300px로 축소 |
| ≤ 640px | 페이지별 stats / feature grid | 2열 또는 1열로 무너짐 |
| ≤ 540px | .carousel-rail | 카드 너비 86% (스냅 단일) |
미디어 쿼리는 모두 max-width 기준 (모바일-라스트 디센딩 패턴). min-width 기준이 필요하면 페이지에서 명시.
Best practices
언제 어느 컨테이너를?
읽기 위주 — .container-sm. 일반 콘텐츠 — .container. 풀폭 시각 — .container-lg. 한 페이지 안에서 컨테이너를 자주 바꾸면 시각 리듬이 깨집니다.
언제 어느 그리드를?
2 (대비/이중 흐름) → .grid-2, 3 (트랙·카테고리) → .grid-3, 4 (stats·로고 강) → .grid-4. 그 외 비율은 페이지 <style>에서 명시.
금지 사항
- grid 안에 또 grid를 nest 3단계 이상 금지 — 가독성 저하
- 새 spacing 값을 만들지 말 것 — 11단계 안에서 해결
- 컨테이너 padding(좌우)을 직접 덮어쓰지 말 것 — 토큰만 변경