<div class="container" style="border:1px dashed var(--border-strong);padding-block:var(--space-4)">
  <p class="muted" style="margin:0">One centered column, <code>--container</code> = 1200px, side padding <code>--gutter</code>.</p>
</div>

760px for long-form reading.

Narrow (reading) column

<div class="container container--narrow" style="border:1px dashed var(--border-strong);padding-block:var(--space-4)">
  <p class="muted" style="margin:0">760px for long-form reading.</p>
</div>

Usage

Header, nav, and main share this one column, the logo and menu never float to the window edge.
Page ground is always white --bg; never a tinted page ground.

Grid & Row ›