Reference

Grid system

A 12-column CSS Grid. .grid-12 is the container; children take .col-span-1….col-span-12. Add responsive tiers (.col-md-*, .col-lg-*) and gutter modifiers (.gap-sm / .gap-lg). Resize the window to see the responsive rows reflow.

How it works

  • The 12 columns are minmax(0, 1fr) tracks, so content never overflows its column.
  • Columns are mobile-first: below 640px every column becomes full width automatically.
  • .col-md-N takes effect ≥768px, .col-lg-N ≥1024px — later tiers win.

Equal columns

.col-span-6
.col-span-6
.col-span-4
.col-span-4
.col-span-4
3
3
3
3
<div class="grid-12">
  <div class="col-span-4">…</div>
  <div class="col-span-4">…</div>
  <div class="col-span-4">…</div>
</div>

Mixed widths

.col-span-8 (main)
.col-span-4 (aside)
2
.col-span-7
3

Responsive tiers

Stacked on mobile → 2-up on tablet → 3-up on desktop. Resize to watch it change.

12 / 6 / 4
12 / 6 / 4
12 / 12 / 4
<div class="grid-12">
  <div class="col-span-12 col-md-6 col-lg-4">…</div>
  <div class="col-span-12 col-md-6 col-lg-4">…</div>
  <div class="col-span-12 col-md-12 col-lg-4">…</div>
</div>

Offsets

Start a column at a specific track with .col-start-N (2–4 provided).

.col-span-4 .col-start-3
.col-span-6 .col-start-4 (centred)

Nesting

A .grid-12 inside a column starts its own 12 columns.

.col-span-4
nested 6
nested 6
nested 12

Gutters

.gap-sm and .gap-lg change the gutter; default is --space-6.

gap-sm
gap-sm
gap-sm
gap-lg
gap-lg
gap-lg

A realistic layout

Sidebar + content + widgets, collapsing to a single column on small screens.

Main content

col-span-12 · col-md-6 — the reading column.

Widget A

Widget B