Layout

Overview

Layout primitives are small utility classes for building page structures. Each primitive solves one structural concern. Compose several primitives to create more complex layouts.

Simple pages have sensible defaults

<header>, <main>, and <footer> receive default surface colors, borders, padding, and sticky footer behavior when they are direct children of <body>. You do not need classes for a simple page.

<body>
  <header>Site header</header>
  <main>Page content</main>
  <footer>Site footer</footer>
</body>

Classless <main>, <article>, and <section> elements also receive automatic vertical rhythm between direct children. To disable this rhythm, add a class to the <main>, <article>, or <section> element.

Landmark details →

Layout primitives

Container

The container centers content within a maximum width and adds a horizontal gutter. Use it as a page wrapper. Container details →

1
2
3
4

Grid

The grid creates responsive, auto-filling columns based on --grid-min-size. Available modifiers are .halves and .thirds. Grid details →

Side
Main content area

Sidebar

The sidebar places fixed-width content beside flexible content. It stacks vertically when the content area becomes too narrow. Use it for media objects and asides. Sidebar details →

1
2
3
4

1
2

Switcher

The switcher arranges items in a row until the available width reaches --switcher-breakpoint, then stacks them vertically. Use it for pricing or feature cards. Switcher details →

First item
Second item
Third item
Design
Build
Ship
Accessibility
Performance

Cluster

A cluster arranges items horizontally and wraps them when the available space is insufficient. Use it for tags, filters, and button rows. Cluster details →

Title

Repel

Repel places child groups at opposite ends. Use it in toolbars, card footers, and header rows. Repel details →

Frame

Frame crops images and videos to a fixed aspect ratio. The default ratio is 16:9. Frame details →

Composing layouts

Layout primitives follow these composition rules:

Build a documentation layout

This documentation site places a .sidebar inside a .container to create its navigation and content layout:

<body>
  <header>...</header>
  <div class="sidebar container">
    <aside>Navigation</aside>
    <main>Content</main>
  </div>
  <footer>...</footer>
</body>

Build an article layout

Combine .container.slim with .flow to lay out an article or blog post. Add .switcher where the content requires columns. Set --switcher-breakpoint to control when those columns stack.

Article title

Intro paragraph.

...
...
...
<main class="container slim | flow">
  <h1>Article title</h1>
  <p>Intro paragraph.</p>
  <div class="switcher" style="--switcher-breakpoint: 24rem;">
    <article class="card">...</article>
    <article class="card">...</article>
    <article class="card">...</article>
  </div>
</main>

Build a toolbar

A .repel containing .cluster groups keeps two action sets at opposite ends while each group wraps independently:

<div class="repel">
  <div class="cluster">
    <button>Filter</button>
    <button>Sort</button>
  </div>
  <div class="cluster">
    <button>Export</button>
    <button>New item</button>
  </div>
</div>

Build a card footer

A .flow inside a card with a .repel at the end for a label and action:

<article class="card">
  <h2>Card title</h2>
  <p>Card content.</p>
  <footer class="repel">
    <span class="badge">Draft</span>
    <button>Edit</button>
  </footer>
</article>