Layout

Layout primitives control structure and flow — how content stacks, how columns form, and how sections are contained. They work with spacing tokens (see Spacing) but serve a different purpose: spacing defines distance, layout defines arrangement.

For the full page hierarchy (body → page-wrapper → page-content → section → padding-global → container → block), see the Layout docs.

Blocks

A .block is a vertical flex stack with a default gap of var(--space-m) between children. It is the fundamental building block for content layout.

Default gap

<div class="block">
  <div>First item</div>
  <div>Second item</div>
  <div>Third item</div>
</div>

Gap modifiers

Add .gap-* to control spacing between children. These work on both .block and .grid.

Horizontal row

Add .row to a block to switch from vertical stacking to horizontal layout. Use .row-reverse for right-to-left order.

<div class="block row gap-xl">
  <div>Left</div>
  <div>Centre</div>
  <div>Right</div>
</div>

Alignment modifiers

Use alignment classes on .block (or .block .row) to control cross-axis and main-axis positioning.

Grid

CSS grid layout with column presets. The default is a responsive 2-column grid. Add .cols-3 or .cols-4 for more columns, and .gap-* to control gutter size.

Default (2 columns)

<div class="grid">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

3 columns

<div class="grid cols-3">
  <div>Item 1</div>
  <div>Item 2</div>
  ...
</div>

4 columns with small gap

Containers

Containers centre content and cap its maximum width. Use them inside sections to control content density.

<div class="container-small">Narrow content</div>
<div class="container-medium">Standard content</div>
<div class="container-large">Wide content</div>

Rules

• Containers add margin-left: auto and margin-right: auto — they centre themselves
• Containers set width: 100% so they fill available space up to the max-width
• Nest containers inside .padding-global for consistent page margins

Max-Width Utilities

Max-width utilities cap width without centring. Use them on individual elements that need a width constraint but should stay in normal flow.

<p class="max-width-small">This paragraph won't exceed 640px.</p>

Containers vs Max-Width

• Container = max-width + auto margins (centred)
• Max-width = max-width only (stays in flow, left-aligned)

Padding Global

.padding-global adds consistent horizontal padding to the page. It is applied once per section row, wrapping the container.

<section>
  <div class="padding-global">
    <div class="container-medium">
      <!-- Content here -->
    </div>
  </div>
</section>

Padding Utilities

General-purpose padding utilities for spacing inside elements.

Key Rules

• Blocks control micro spacing (.gap-* between children)
• Grids control column layout — use .gap-* for gutters
• Containers control width and centring — never apply spacing directly to them
• Sections control macro spacing (.top-*, .bottom-* classes)
• Never mix responsibilities across layers
• Never use spacer divs or apply margins inside blocks
• Always use gap utilities for spacing between siblings, not margin on individual children