2nd/10_Wiki/Topics/Architecture/Base_Layouts.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-base-layouts	Base Layouts	10_Wiki/Topics	verified	self	layout-primitives app-shell holy-grail-layout	none	A	0.9	applied	layout css ui responsive shell		2026-05-10	pending	language framework tsx 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)

.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)

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)

.cover {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 1rem;
}
.cover > * { max-inline-size: 60ch; }

Split-pane (resizable)

// 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

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

Container queries

.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)

.app:has(#nav-toggle:checked) .sidebar { transform: translateX(0); }
.sidebar { transform: translateX(-100%); transition: transform .2s; }

Mobile app shell — bottom nav (safe area)

.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)

.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

• 부모: CSS · UI Patterns
• 변형: Holy-Grail-Layout · App-Shell
• 응용: Dashboard · Editor-Layout
• 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