Antigravity Agent
171 lines
4.6 KiB
Markdown
171 lines
4.6 KiB
Markdown
---
|
|
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
|
|
- 부모: [[CSS]] · [[Frontend]]
|
|
- 변형: [[Container Queries]] · [[Subgrid]]
|
|
- 응용: [[반응형 디자인 패턴]] · [[Design System]]
|
|
- Adjacent: [[Logical Properties]] · [[CSS Custom Properties]]
|
|
|
|
## 🤖 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 결정 + 패턴 |
|