Layout primitives

Compositional building blocks for page structure. These primitives handle common layout patterns—stacking, centering, grids, sidebars—so you can compose complex layouts from simple, predictable parts.

The base + modifier pattern

All layout primitives follow a consistent base + modifier pattern:

Base class provides the core behavior and sets CSS custom properties
Modifiers only override specific variables:never set properties directly

This means you always need both the base class and any modifiers:

<!-- Correct: base + modifier -->
<div class="stack stack-compact">...</div>
<div class="box box-tight">...</div>
<section class="section section-wide">...</section>

<!-- Incorrect: modifier alone won't work -->
<div class="stack-compact">...</div>

This pattern enables:

Composability:stack multiple modifiers on one element
Container queries:base class sets up containment, modifiers respond to it
Predictability:modifiers only adjust, never replace, base behavior

Cover

Vertically centered full-screen panel. Great for page heroes and dramatic editorial breaks. Add a header and footer tag to anchor content to the top and bottom of the cover.

Code

<header class="cover">
  <header>Top content</header>
  <section>
    <h1>Centered title</h1>
    <p>Centered content</p>
  </section>
  <footer>Bottom content</footer>
</header>

Interview

An interview with Ned Ludd

By Jeremiah Brandreth

Sidebar

Two-column layout with a fixed-width sidebar and flexible main content. Automatically stacks on narrow containers. The sidebar element is always the first child.

Code

<!-- Default -->
<div class="sidebar">
  <aside>Sidebar</aside>
  <main>Main content</main>
</div>

<!-- Variants -->
<div class="sidebar sidebar-reverse">...</div>
<div class="sidebar sidebar-1px">...</div>
<div class="sidebar sidebar-snug">...</div>
<div class="sidebar sidebar-loose">...</div>

.sidebar (default)

Sidebar on the left, main content on the right with no gap.

.sidebar-reverse

Flips the visual order—sidebar appears on the right while remaining first in source order.

.sidebar-1px

Sidebar on the left, main content on the right with 1px gap.

.sidebar-snug

Sidebar on the left, main content on the right with single-line gap.

.sidebar-loose

Sidebar on the left, main content on the right with double-line gap.

Section

Full-width container with responsive horizontal padding and bottom padding by default. Sections with color schemes automatically add top padding when following non-scheme siblings. Use to divide pages into distinct regions with edge-to-edge backgrounds.

Code

<section class="section">...</section>

<!-- Variants -->
<section class="section section-wide">...</section>
<section class="section section-full-bleed">...</section>
<section class="section section-spaced">...</section>
<section class="section section-snug">...</section>
<section class="section section-tight">...</section>
<section class="section section-top-tight">...</section>
<section class="section section-bottom-tight">...</section>

.section (default)

Default section

.section-wide

Reduced horizontal padding for wider content.

Wide section

.section-full-bleed

No padding—content extends to edges.

Full-bleed section

.section-spaced

Generous vertical padding for major page divisions.

Spaced section

.section-snug

Single-line vertical padding top and bottom.

Snug section

.section-tight

No vertical padding.

Vertically tight

.section-top-tight / .section-bottom-tight

Remove padding from just one edge.

Bottom tight

Top tight

Center

Horizontally centers content with a maximum width based on ideal reading measure. The go-to primitive for article text, forms, or any single-column content.

Code

<div class="center">
  <p>Centered content</p>
</div>

<!-- Variants -->
<div class="center center-narrow">...</div>
<div class="center center-wide">...</div>

.center-narrow

Constrained to the narrow measure. Use for focused content like login forms or short-form text.

Narrow centered content

.center (default)

Standard measure (~65 characters). Optimal for body text and long-form reading.

Default centered content

.center-wide

Wide measure. Use for content that benefits from more horizontal space, like dashboards or data tables.

Wide centered content

Grid

Auto-responsive grid that adapts to available space without breakpoints. For more control, use fixed column classes with container query modifiers.

Code

<!-- Auto-fit grid -->
<div class="grid">
  <div>Item</div>
  <div>Item</div>
</div>

<!-- Fixed columns with breakpoints -->
<div class="grid grid-columns-2 grid-columns-4@md">
  ...
</div>

<!-- Spans -->
<div class="grid-column-span-2">...</div>
<div class="grid-column-span-full">...</div>
<div class="grid-row-span-2">...</div>

<!-- Gap variants -->
<div class="grid grid-gap-0">...</div>
<div class="grid grid-gap-1px">...</div>
<div class="grid grid-gap-05">...</div>
<div class="grid grid-gap-2">...</div>

.grid (default)

Automatically responsive. Items reflow based on a minimum column width (~20rem), no breakpoints needed.

Item

.grid-narrow

Narrower minimum column width for denser grids like color swatches or thumbnails.

Item

Fixed columns

Explicit column counts with container query breakpoints: @md (40rem) and @lg (60rem).

Item

Column and row spans

Span items across multiple columns or rows. Spans also support container query modifiers.

Item

.grid-column-span-full

.grid-column-span-2

.grid-column-span-2 @md:3 @lg:4

.grid-row-span-2

.grid-row-span-2 @md:3

Item

Gap sizes

Control spacing between grid items.

.grid-gap-0

Item

.grid-gap-1px

Item

.grid-gap-05

Item

.grid (default: single-line gap)

Item

.grid-gap-2

Item

Stack

Injects consistent vertical space between child elements. The fundamental primitive for controlling vertical rhythm—use it everywhere you need evenly-spaced content flowing downward.

Code

<div class="stack">
  <p>First item</p>
  <p>Second item</p>
  <p>Third item</p>
</div>

<!-- Variants -->
<div class="stack stack-compact">...</div>
<div class="stack stack-half">...</div>
<div class="stack stack-comfortable">...</div>
<div class="stack stack-spacious">...</div>

.stack-compact

Half-line spacing. Use for tightly related items like form fields or compact lists.

Item

.stack (default)

Single-line spacing. The baseline rhythm for most content.

Item

.stack-half

Half-line spacing. Half the baseline rhythm for tighter content.

Item

.stack-comfortable

Double-line spacing. Use for separating distinct content blocks or card layouts.

Item

.stack-spacious

Quadruple-line spacing. Use for major section breaks or hero layouts.

Item

Cluster

Groups items horizontally with wrapping. Perfect for navigation, tag lists, button groups, or any set of inline elements that should flow and wrap naturally.

Code

<nav class="cluster">
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

<!-- Variants -->
<div class="cluster cluster-compact">...</div>
<div class="cluster cluster-center">...</div>
<div class="cluster cluster-end">...</div>
<div class="cluster cluster-between">...</div>
<div class="cluster cluster-nowrap">...</div>

.cluster (default)

Single-line gap, aligned to the start.

Item

.cluster-compact

Half-line gap for tighter groupings like tags or pills.

Item

.cluster-center

Centers items horizontally within the container.

Item

.cluster-end

Aligns items to the end (right in LTR languages).

Item

.cluster-between

Distributes items with equal space between them. Great for navbars with logo on one side and links on the other.

Logo

Navigation

Box

Simple padding wrapper. Use inside other primitives to add breathing room around content, especially when applying background colors.

Code

<div class="box">
  <p>Padded content</p>
</div>

<!-- Variants -->
<div class="box box-tight">...</div>
<div class="box box-loose">...</div>

.box.box-tight

.box

.box.box-loose

Reel

Horizontal scrolling container for collections of items. Perfect for image galleries, card carousels, or any content that should scroll horizontally rather than wrap.

Code

<div class="reel">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

<!-- Width variants -->
<div class="reel reel-narrow">...</div>
<div class="reel reel-medium">...</div>
<div class="reel reel-wide">...</div>

<!-- Gap variants -->
<div class="reel reel-compact">...</div>
<div class="reel reel-spacious">...</div>

<!-- Other -->
<div class="reel reel-no-scrollbar">...</div>
<div class="reel reel-padded">...</div>

.reel (default)

Auto-width items with standard gap. Items size to their content.

Item one

Item two

Item three

Item four

Item five

Item six

.reel-narrow

Fixed narrow item width (8 lines). Use for thumbnails or compact cards.

Item

.reel-medium

Fixed medium item width (12 lines). Good for standard cards.

Item

.reel-wide

Fixed wide item width (16 lines). Use for featured content or large cards.

Item

Gap variations

Control spacing between items with .reel-compact (half-line) or .reel-spacious (double-line).

.reel-compact

Item

.reel-spacious

Item

.reel-no-scrollbar

Hides the scrollbar while maintaining scroll functionality. Use when the scroll affordance should be more subtle.

Item

Imposter

Positions an element over the rest of the content, "imposing" on it. The foundation for modals, tooltips, and overlays. Based on Every Layout's Imposter pattern.

Code

<!-- Absolute positioning -->
<div style="position: relative;">
  <div class="imposter">Centered</div>
</div>

<!-- Fixed to viewport -->
<div class="imposter-fixed">...</div>

<!-- For dialogs: browser centers via showModal() -->
<dialog class="dialog imposter-contain">
  <div class="box stack">...</div>
</dialog>

.imposter

Absolutely positioned and centered within its positioned parent.

Centered content

.imposter-fixed

Fixed positioning relative to the viewport. Use for persistent overlays.

.imposter-contain

Constrains size to viewport with margin. Use on dialogs and overlays to prevent content from touching edges.

See Dialogs for complete modal and popup documentation.