Layout Pattern Catalog

Primary role: pattern lookup.

Generated from scripts/generate-patterns.mjs and scripts/pattern-data.mjs.

Planning Layer

• Layout Planning Guide - Pre-design entry point for choosing and composing patterns.
• Decision Tree - Question-driven route from screen constraints to pattern categories.
• Layout Brief - Questions to answer before selecting a pattern stack.
• Layout Recipes - Screen-level compositions built from reusable patterns.

Patterns

• stack - Stacking: Create consistent vertical rhythm between direct children.
• box - Containment: Wrap content with predictable internal spacing.
• center - Centering: Center a block while respecting a maximum measure.
• cluster - In-line grouping: Keep related items together while allowing wrapping.
• content-limiter - Containment: Keep prose width readable inside fluid containers.
• super-center - Centering: Center one region along both axes.
• icon-frame - Media / Fit: Keep an icon aligned inside a fixed square slot.
• frame - Media / Fit: Preserve media aspect ratio in a responsive slot.
• cover - Viewport / Shell: Keep a central region balanced between optional header and footer.
• sidebar - Split / Sidebar: Let a narrow sidebar and wider content wrap when space is tight.
• switcher - Split / Sidebar: Switch equal regions from row to stack without a viewport breakpoint.
• media-object - Split / Sidebar: Align media and descriptive content as a stable pair.
• split-nav - In-line grouping: Separate primary and secondary nav actions in one row.
• holy-grail - Viewport / Shell: Place header, footer, sidebars, and main content in a resilient shell.
• sticky-footer - Viewport / Shell: Keep footer at the bottom when content is short.
• sticky-header - Viewport / Shell: Keep a header visible above a scrolling content region.
• scroll-body-shell - Viewport / Shell: Keep shell regions fixed while only the body scrolls.
• fixed-sidenav-shell - Viewport / Shell: Keep side navigation stable while main content scrolls.
• sticky-aside - Split / Sidebar: Keep related aside content visible during long reads.
• ram-grid - Grid / Repetition: Repeat items into as many useful columns as space allows.
• card-grid - Grid / Repetition: Align repeating cards in rows and columns.
• twelve-span-grid - Grid / Repetition: Provide a twelve-column placement scaffold.
• page-grid - Grid / Repetition: Align page content to margins, gutters, and a central track.
• grid-wrapper - Grid / Repetition: Center grid tracks while allowing full-width breakout tracks.
• columns - Grid / Repetition: Flow long content into balanced text columns.
• deconstructed-pancake - In-line grouping: Let equal cards stretch in a row and stack naturally when narrow.
• line-up - Stacking: Keep card footer actions aligned at the bottom.
• clamped-card - Containment: Constrain a card to a readable fluid width.
• fluid-styles - Containment: Let a region fill available width without exceeding a readable max.
• split-screen - Split / Sidebar: Split a viewport or region into two balanced panes.
• list-detail - Split / Sidebar: Place an explorable list beside its detail region.
• supporting-pane - Split / Sidebar: Keep supplemental information beside a primary task.
• feed - Stacking: Stack repeated content items with stable rhythm.
• breadcrumb - In-line grouping: Lay out hierarchy links compactly with wrapping.
• pagination - In-line grouping: Lay out page controls as a bounded wrapping row.
• badge-list - In-line grouping: Align item labels with trailing counts.
• step-nav - Stacking: Present sequential steps with consistent vertical rhythm.
• tab-strip - In-line grouping: Keep peer tabs in one stable row that can wrap.
• reel - In-line grouping: Let a row scroll horizontally instead of wrapping.
• imposter - Overlay / Exception: Place an overlay region over a parent without changing document order.
• panel-layout - Viewport / Shell: Create predictable main and utility panels.
• overlay-stack - Overlay / Exception: Stack several regions into the same grid cell.
• wrap-row - In-line grouping: Wrap controls into rows with stable gaps.
• dense-grid - Grid / Repetition: Fill a compact grid with repeated small items.
• masonry-approx - Grid / Repetition: Approximate staggered content with columns when exact row alignment is not needed.
• main-with-rail - Split / Sidebar: Keep primary content dominant with a narrow secondary rail.