Grid

Grid System

Layout

12-column Swiss-style responsive grid with flexible gaps and alignment. Uses CSS Grid with logical properties for RTL support. Supports nested grids, asymmetric layouts, gap variants (compact/normal/wide), and responsive column changes. All gaps align to the vertical rhythm system.

Name	Description
`.grid`	12-column Swiss-style responsive grid container with automatic column flow.
`.grid-row`	Grid container with row flow.
`.grid-{n}`	Explicit n-column grid container (1 to 12 columns).
`.col-{n}`	Column span modifiers (1 to 12 columns, direct children of .grid).
`.start-{n}`	Column start position (1 to 12).
`.grid.no-gap`	Removes grid row gap.
`.grid.compact`	Compact gap variant aligned to `--trim`.
`.grid.relaxed`	Relaxed gap variant aligned to `--space`.
`.sm:col-{n}`	Responsive column spans at mobile viewport (<=768px).
`.sm:grid-{n}`	Responsive column grid count at mobile viewport (<=768px).
`.lg:col-{n}`	Responsive column spans at desktop viewport (>=1024px).
`.lg:grid-{n}`	Responsive column grid count at desktop viewport (>=1024px).

// Basic 12-column grid with equal width columns
<div class="grid">
  <div class="col-3">Item 1</div>
  <div class="col-3">Item 2</div>
  <div class="col-3">Item 3</div>
  <div class="col-3">Item 4</div>
</div>

// Responsive grid layout
<div class="grid">
  <div class="col-12 sm:col-6 lg:col-3">Card</div>
  <div class="col-12 sm:col-6 lg:col-3">Card</div>
</div>

// Main content + sidebar layout
<div class="grid">
  <div class="col-8">Main content</div>
  <div class="col-4">Sidebar</div>
</div>

since 0.1.0 · see standard-04-rhythm.scss

All classes

Other

Class	Declares
`.grid-row`	`grid-auto-flow: row`

TYPOGRAPHIC NUANCES

Class	Declares
`.row`, `.col-row`, `.col-full`	`grid-column: 1 / -1`
`.grid .rhythm > *`	`margin-block-end: var(--space)`
`.free-col`	`--start: auto`
`.free-col.sticky`	`position: sticky`
`.grid.no-gap`	`row-gap: 0`
`.box`, `.grid > .col-1`, `.grid > .col-2`, `.grid > .col-3`, `.grid > .col-4`, `.grid > .col-5`, `.grid > .col-6`, `.grid > .col-7`, `.grid > .col-8`, `.grid > .col-9`, `.grid > .col-10`, `.grid > .col-11`, `.grid > .col-12`, `.grid > .col-full`	`margin-block: 0`
`.container-hero`	`margin-inline: 0`