2nd/10_Wiki/Topics/Architecture/Base_Layouts.md

---
id: wiki-2026-0508-base-layouts
title: Base Layouts
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [layout-primitives, app-shell, holy-grail-layout]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [layout, css, ui, responsive, shell]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: tsx
  framework: tailwind
---

# Base Layouts

## 매 한 줄
> **"매 layout 의 primitive 의 reuse 한다"**. 매 base layout 의 application shell — 매 header / sidebar / main / footer 의 stable scaffolding. 매 2026 의 CSS Grid + Flexbox + Container Queries (baseline 2024) + `dvh/svh/lvh` viewport units 의 holy-grail 의 trivial 의 만들었다.

## 매 핵심

### 매 canonical layouts
- **Stack**: 매 vertical flow — header/main/footer.
- **Sidebar**: 매 nav + content — 2-column.
- **Holy Grail**: 매 header + nav + main + aside + footer.
- **Centered (Cover)**: 매 hero / login.
- **Split-pane**: 매 editor / preview, mail client.
- **Dashboard grid**: 매 card grid — 매 auto-fit minmax.

### 매 modern primitives (2024-2026)
- **CSS Grid `subgrid`**: 매 nested alignment (Firefox 71, Chrome 117, Safari 16).
- **Container queries**: 매 component-level responsive (`@container`).
- **`dvh` / `svh` / `lvh`**: 매 mobile address-bar 의 stable viewport.
- **`:has()`**: 매 parent selector — 매 layout 의 child-state-driven.
- **Anchor positioning** (Chrome 125+): 매 popover / tooltip 의 native.

### 매 응용
1. Admin dashboard.
2. Editor (VS Code-style).
3. Marketing landing.
4. Mobile app shell — 매 bottom nav.

## 💻 패턴

### Holy Grail — CSS Grid (12 lines)
```css
.app {
  display: grid;
  min-height: 100dvh;
  grid-template:
    "header  header  header" auto
    "nav     main    aside"  1fr
    "footer  footer  footer" auto
    / 200px 1fr 200px;
}
.header { grid-area: header; }
.nav    { grid-area: nav; }
.main   { grid-area: main; }
.aside  { grid-area: aside; }
.footer { grid-area: footer; }

@media (max-width: 768px) {
  .app {
    grid-template:
      "header" auto
      "nav"    auto
      "main"   1fr
      "aside"  auto
      "footer" auto / 1fr;
  }
}
```

### Tailwind app shell (React)
```tsx
export function AppShell({ children }: { children: ReactNode }) {
  return (
    <div className="grid min-h-dvh grid-rows-[auto_1fr_auto] grid-cols-[16rem_1fr]">
      <header className="col-span-2 border-b bg-white px-4 py-3">
        <Logo /> <UserMenu className="ml-auto" />
      </header>
      <aside className="border-r overflow-y-auto">
        <Nav />
      </aside>
      <main className="overflow-y-auto p-6">{children}</main>
      <footer className="col-span-2 border-t px-4 py-2 text-sm text-gray-500">
        © 2026
      </footer>
    </div>
  );
}
```

### Centered (Cover)
```css
.cover {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 1rem;
}
.cover > * { max-inline-size: 60ch; }
```

### Split-pane (resizable)
```tsx
// react-resizable-panels (2025 default)
import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';

<PanelGroup direction="horizontal">
  <Panel defaultSize={30} minSize={20}><FileTree /></Panel>
  <PanelResizeHandle className="w-1 bg-gray-200 hover:bg-blue-500" />
  <Panel><Editor /></Panel>
  <PanelResizeHandle className="w-1 bg-gray-200" />
  <Panel defaultSize={30}><Preview /></Panel>
</PanelGroup>
```

### Auto-fit dashboard grid
```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1rem;
}
```

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

@container (min-width: 400px) {
  .card .layout {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1rem;
  }
}
```

### Sidebar with `:has()` (zero JS)
```css
.app:has(#nav-toggle:checked) .sidebar { transform: translateX(0); }
.sidebar { transform: translateX(-100%); transition: transform .2s; }
```

### Mobile app shell — bottom nav (safe area)
```css
.bottom-nav {
  position: sticky;
  bottom: 0;
  padding-block-end: env(safe-area-inset-bottom);
  background: white;
  border-top: 1px solid #eee;
}
.scroll-area {
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
```

### Subgrid (nested card alignment)
```css
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* title / body / footer aligned across siblings */
}
```

## 매 결정 기준
| Layout | Tool |
|---|---|
| App shell, 2D | CSS Grid named areas |
| 1D linear | Flexbox |
| Component-level responsive | Container queries |
| Resizable panes | react-resizable-panels / Radix Splitter |
| Mobile shell | dvh + safe-area-inset |
| Multi-card alignment | `subgrid` |

**기본값**: Grid for 2D + named areas, Flex for 1D, Tailwind utility for prototyping.

## 🔗 Graph
- 변형: [[Holy-Grail-Layout]] · [[App-Shell]]
- Adjacent: [[Arrangement-and-Composition]] · [[Architecture_Diagramming_Standards]]

## 🤖 LLM 활용
**언제**: 매 ASCII wireframe → CSS Grid 의 generation, Tailwind class 의 suggestion.
**언제 X**: 매 pixel-perfect design — 매 designer + visual review 의 필수.

## ❌ 안티패턴
- **`100vh` on mobile**: 매 address-bar overflow — 매 `100dvh` 의 사용.
- **Nested flex hell**: 매 5+ flex level — 매 grid 의 use.
- **Fixed pixel breakpoint**: 매 zoom 의 break — 매 `em`/`rem` 의 use.
- **Hidden overflow without scroll**: 매 content 의 cut.
- **Magic number margins**: 매 design token / spacing scale 의 use.

## 🧪 검증 / 중복
- Verified (CSS Grid spec — W3C; Every Layout — Bell & Andrew; web.dev — container queries).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — Grid/Flex/container-queries/subgrid base layout patterns |