2nd/10_Wiki/Topics/Frontend/레이아웃 Flexbox - Grid 완전 이해.md

---
id: wiki-2026-0508-레이아웃-flexbox-grid-완전-이해
title: 레이아웃 Flexbox & Grid 완전 이해
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Flexbox, CSS Grid, Flex Grid 차이]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [css, layout, flexbox, grid, frontend]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: css
  framework: native
---

# 레이아웃 Flexbox & Grid 완전 이해

## 매 한 줄
> **"매 Flexbox는 1차원, Grid는 2차원"**. Flexbox 매 row OR column 단일 축 배치 — Grid 매 row AND column 동시 — 매 2026 modern layout = container query + subgrid + Grid + 매 nested Flex.

## 매 핵심

### 매 Flexbox 본질
- 매 main axis + cross axis — 매 1차원.
- `flex: 1 1 auto` — 매 grow shrink basis — 매 핵심 shorthand.
- `gap` — 매 margin hack 의 X — 매 modern.
- `align-items` (cross) vs `justify-content` (main) — 매 헷갈리지 않음.

### 매 Grid 본질
- `grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))` — 매 responsive 의 핵심 패턴.
- `grid-template-areas` — 매 visual ASCII layout — 매 직관.
- `subgrid` (Chrome 117+, Firefox 71+, Safari 16+) — 매 nested grid 매 parent track 상속.
- Container query (@container) — 매 component 단위 responsive.

### 매 결정
- 1D (nav, button row, card 내부) → Flex.
- 2D (page layout, dashboard) → Grid.
- 매 둘 다 함께 — 매 현실 — 매 outer Grid + inner Flex.

## 💻 패턴

### Holy Grail Layout (Grid)
```css
.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 1rem;
}
.header { grid-area: header; }
.nav    { grid-area: nav; }
.main   { grid-area: main; }
.aside  { grid-area: aside; }
.footer { grid-area: footer; }
```

### Auto-fit responsive cards
```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
/* 매 media query 의 X — 매 자동 wrap */
```

### Centering (modern)
```css
.center {
  display: grid;
  place-items: center;
  min-height: 100dvh;
}
```

### Flex navbar
```css
.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav .spacer { margin-left: auto; }  /* 매 push to right */
```

### Subgrid (nested alignment)
```css
.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
.child {
  display: grid;
  grid-template-columns: subgrid;  /* 매 parent column 상속 */
  grid-column: 1 / -1;
}
```

### Container query
```css
.card { container-type: inline-size; }

@container (min-width: 400px) {
  .card-body { display: grid; grid-template-columns: 1fr 2fr; }
}
```

### Aspect ratio + Grid item
```css
.thumbnail {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
```

### Flex order (a11y caution)
```css
.flex { display: flex; }
.flex > .first { order: -1; }
/* 매 visual order 만 — 매 DOM order 의 X — 매 screen reader 매 DOM 매 따름 */
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| Card grid auto-wrap | Grid `auto-fit minmax` |
| Nav bar (logo + links + button) | Flex + `margin-left: auto` |
| Page shell (header/sidebar/main/footer) | Grid `template-areas` |
| Centering single item | `place-items: center` (Grid) |
| Equal-width buttons | Flex `flex: 1` |
| Form field label/input alignment across rows | Subgrid |

**기본값**: page = Grid, component = Flex, 매 둘 nest.

## 🔗 Graph
- 부모: [[Frontend]]
- 변형: [[컨테이너 쿼리 (Container Queries)|Container Queries]] · [[Subgrid]]
- 응용: [[Design System]]

## 🤖 LLM 활용
**언제**: layout debugging, "이게 Flex/Grid 어느 게 맞나" 결정, responsive 패턴 generate.
**언제 X**: 매 visual design taste 결정 — 매 human 매 더 잘.

## ❌ 안티패턴
- **Float for layout**: 매 2026 의 X — 매 legacy 만.
- **Nested Flex 무한**: 매 5단 nest — 매 Grid 의 X — 매 readability 의 X.
- **`width: 100%` in flex item**: 매 `flex: 1` 의 사용.
- **`grid-template-columns: 1fr 1fr 1fr`**: 매 `repeat(3, 1fr)` 의 사용.
- **margin hack instead of gap**: 매 last-child margin reset — 매 `gap` 의 사용.

## 🧪 검증 / 중복
- Verified (MDN CSS Layout, web.dev, css-tricks Complete Guide).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — Flex 1D / Grid 2D 결정 + 패턴 |