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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-레이아웃-flexbox-grid-완전-이해	레이아웃 Flexbox & Grid 완전 이해	10_Wiki/Topics	verified	self	Flexbox CSS Grid Flex Grid 차이	none	A	0.9	applied	css layout flexbox grid frontend		2026-05-10	pending	language framework css 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)

.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

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

Centering (modern)

.center {
  display: grid;
  place-items: center;
  min-height: 100dvh;
}

Flex navbar

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

Subgrid (nested alignment)

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
.child {
  display: grid;
  grid-template-columns: subgrid;  /* 매 parent column 상속 */
  grid-column: 1 / -1;
}

Container query

.card { container-type: inline-size; }

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

Aspect ratio + Grid item

.thumbnail {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Flex order (a11y caution)

.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) · 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 결정 + 패턴