Files

T

Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization

10_Wiki/Topics 대규모 정리:
- 오류 캡처/미완성 stub 문서 227개 제거
- 교차폴더 중복 43클러스터 병합 (63파일 → redirect)
- 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건
- 카테고리 MOC 6개 신규 생성
- Graph 섹션 미해결 related-keyword 링크 10,058건 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-20 23:52:15 +09:00

4.2 KiB

Raw Blame History

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

title

CSS Grid

매 한 줄

"매 2D layout 의 native primitive". CSS Grid 매 row + column 동시 control 의 layout system — 매 Flexbox 의 1D 보완. 매 2026 현재 매 모든 modern browser 매 stable, 매 subgrid + masonry (experimental) 까지 지원, 매 page-level 부터 component-level 까지 default tool.

매 핵심

매 모델

Grid container (display: grid) — 매 parent.
Grid items — 매 direct children, 매 line-based positioning.
Tracks — rows + columns, 매 fr unit (fractional space) + minmax() + auto.
Areas — 매 named regions, 매 semantic layout description.

매 vs Flexbox

Grid: 매 2D (row + column 동시), 매 layout-first (parent decides).
Flexbox: 매 1D (single axis), 매 content-first (children sizing).
매 함께 mix — 매 outer Grid + inner Flex 매 common.

매 응용

Page layout (header / sidebar / main / footer).
Card grid 매 responsive (auto-fill + minmax).
Dashboard 매 named-area complex layout.
Image gallery 매 masonry.

💻 패턴

Holy Grail layout

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  min-height: 100vh;
}
.header { grid-area: header; }
.nav    { grid-area: nav; }
.main   { grid-area: main; }
.aside  { grid-area: aside; }
.footer { grid-area: footer; }

Responsive card grid (`auto-fill`)

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

Subgrid (nested alignment)

.outer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.card {
  display: grid;
  grid-template-rows: subgrid;  /* inherit parent row tracks */
  grid-row: span 3;
}

Line-based placement

.item {
  grid-column: 2 / span 3;  /* col 2 to 4 */
  grid-row: 1 / -1;          /* full height */
}

Masonry (2026 experimental)

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: masonry;  /* Firefox + Safari TP */
  gap: 8px;
}

Implicit grid + `dense` packing

.feed {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;       /* fill holes */
  grid-auto-rows: 100px;
}
.feed > .featured {
  grid-column: span 2;
  grid-row: span 2;
}

매 결정 기준

상황	Approach
Page-level 2D layout	Grid
Component 매 1D row/column	Flex
Aligned nested grids	Grid + subgrid
Dynamic content count, fluid wrap	Grid `auto-fill`
Dense irregular packing	Grid `auto-flow: dense`

기본값: 매 layout-first 결정 — Grid. 매 content-first sizing — Flex.

🔗 Graph

부모: Layout
변형: Flexbox · Subgrid · 컨테이너 쿼리 (Container Queries)
응용: Responsive Design
Adjacent: CSS Grid 및 Flexbox

🤖 LLM 활용

언제: 2D layout, named areas semantic intent, responsive 매 auto-fill. 언제 X: 1D 매 simple row of buttons — Flexbox 가 더 ergonomic.

❌ 안티패턴

모두 1D 에 Grid 매 사용: 매 Flex 보다 verbose.
Pixel-only tracks: 매 fr + minmax 매 사용 — 매 fluid.
!important 으로 children 매 overriding: 매 grid-area 매 misaligned signal.
Subgrid 매 ignore: nested grids 매 line-up 가 필요할 때 매 subgrid 가 정답.

🧪 검증 / 중복

Verified (MDN CSS Grid Layout 2026, CSS Working Group Level 3).
신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — Grid 2D layout + subgrid + masonry + responsive patterns

4.2 KiB Raw Blame History