Grid System

Responsive, 12-column grid system built with CSS Flexbox. Available in the full bundle (semanticus.css) and the utilities-only bundle (semanticus-utilities.css).

How it works

The grid uses three building blocks:

• .row — a flex container that wraps columns and applies negative horizontal margins to compensate for column gutters.
• [class*="col-"] / .col — flex children that define the column width. All columns are full-width by default (mobile-first) and sized by breakpoint modifiers.
• --grid-gutter-x — a CSS custom property (defaults to --spacing) that controls the horizontal gap between columns.
• --grid-gutter-y — a CSS custom property (defaults to 0) that controls the vertical gap between wrapped rows of columns.

Columns in a row should sum to 12 or fewer. Columns that overflow wrap to the next line automatically.

Grid options

	Default (all sizes)	sm (≥ 576px)	md (≥ 768px)	lg (≥ 1024px)
Class prefix	.col-	.col-sm-	.col-md-	.col-lg-
Auto-width	.col	.col-sm	.col-md	.col-lg
# of columns	12	12	12	12
H. Gutter	--grid-gutter-x (= --spacing)	← same	← same	← same
V. Gutter	--grid-gutter-y (= 0)	← same	← same	← same
Nestable	Yes	Yes	Yes	Yes
Offsets	.col-offset-*	.col-offset-sm-*	.col-offset-md-*	.col-offset-lg-*

Equal-width columns

Use .col (no number) for equal-width auto columns. They share the available space equally regardless of count.

<div class="row mb-d">
  <div class="col"><div class="p-d bg-primary-subtle border border-primary text-center">.col</div></div>
  <div class="col"><div class="p-d bg-primary-subtle border border-primary text-center">.col</div></div>
  <div class="col"><div class="p-d bg-primary-subtle border border-primary text-center">.col</div></div>
</div>
<div class="row">
  <div class="col"><div class="p-d bg-primary-subtle border border-primary text-center">.col</div></div>
  <div class="col"><div class="p-d bg-primary-subtle border border-primary text-center">.col</div></div>
</div>

Fixed-width columns

Use .col-{1–12} to span an explicit number of columns. Values must sum to 12 per row.

<div class="row mb-d">
  <div class="col-1"><div class="p-d bg-primary-subtle border border-primary text-center">1</div></div>
  <div class="col-1"><div class="p-d bg-primary-subtle border border-primary text-center">1</div></div>
  <div class="col-1"><div class="p-d bg-primary-subtle border border-primary text-center">1</div></div>
  <div class="col-1"><div class="p-d bg-primary-subtle border border-primary text-center">1</div></div>
  <div class="col-1"><div class="p-d bg-primary-subtle border border-primary text-center">1</div></div>
  <div class="col-1"><div class="p-d bg-primary-subtle border border-primary text-center">1</div></div>
  <div class="col-1"><div class="p-d bg-primary-subtle border border-primary text-center">1</div></div>
  <div class="col-1"><div class="p-d bg-primary-subtle border border-primary text-center">1</div></div>
  <div class="col-1"><div class="p-d bg-primary-subtle border border-primary text-center">1</div></div>
  <div class="col-1"><div class="p-d bg-primary-subtle border border-primary text-center">1</div></div>
  <div class="col-1"><div class="p-d bg-primary-subtle border border-primary text-center">1</div></div>
  <div class="col-1"><div class="p-d bg-primary-subtle border border-primary text-center">1</div></div>
</div>
<div class="row mb-d">
  <div class="col-2"><div class="p-d bg-primary-subtle border border-primary text-center">2</div></div>
  <div class="col-4"><div class="p-d bg-primary-subtle border border-primary text-center">4</div></div>
  <div class="col-6"><div class="p-d bg-primary-subtle border border-primary text-center">6</div></div>
</div>
<div class="row mb-d">
  <div class="col-4"><div class="p-d bg-primary-subtle border border-primary text-center">4</div></div>
  <div class="col-8"><div class="p-d bg-primary-subtle border border-primary text-center">8</div></div>
</div>
<div class="row">
  <div class="col-3"><div class="p-d bg-primary-subtle border border-primary text-center">3</div></div>
  <div class="col-6"><div class="p-d bg-primary-subtle border border-primary text-center">6</div></div>
  <div class="col-3"><div class="p-d bg-primary-subtle border border-primary text-center">3</div></div>
</div>

Responsive columns

Combine breakpoint modifiers on the same element to change layout at each viewport width. The grid is mobile-first — a class applies at its breakpoint and up.

<div class="row">
  <div class="col-12 col-sm-6 col-md-4 col-lg-3"><div class="p-d bg-primary-subtle border border-primary text-center">.col-12 .col-sm-6 .col-md-4 .col-lg-3</div></div>
  <div class="col-12 col-sm-6 col-md-4 col-lg-3"><div class="p-d bg-primary-subtle border border-primary text-center">.col-12 .col-sm-6 .col-md-4 .col-lg-3</div></div>
  <div class="col-12 col-sm-6 col-md-4 col-lg-3"><div class="p-d bg-primary-subtle border border-primary text-center">.col-12 .col-sm-6 .col-md-4 .col-lg-3</div></div>
  <div class="col-12 col-sm-6 col-md-4 col-lg-3"><div class="p-d bg-primary-subtle border border-primary text-center">.col-12 .col-sm-6 .col-md-4 .col-lg-3</div></div>
</div>

Stacked to horizontal

Use col-sm-* (or col-md-* / col-lg-*) to stack columns on small screens and display them side-by-side once the viewport reaches the target breakpoint.

<div class="row mb-d">
  <div class="col-sm-8"><div class="p-d bg-primary-subtle border border-primary text-center">.col-sm-8</div></div>
  <div class="col-sm-4"><div class="p-d bg-primary-subtle border border-primary text-center">.col-sm-4</div></div>
</div>
<div class="row">
  <div class="col-sm"><div class="p-d bg-primary-subtle border border-primary text-center">.col-sm</div></div>
  <div class="col-sm"><div class="p-d bg-primary-subtle border border-primary text-center">.col-sm</div></div>
  <div class="col-sm"><div class="p-d bg-primary-subtle border border-primary text-center">.col-sm</div></div>
</div>

Mix and match

Combine breakpoint classes freely to build layouts that change shape at multiple breakpoints.

<!-- Stack on mobile, 8/4 split on medium+ -->
<div class="row mb-d">
  <div class="col-12 col-md-8"><div class="p-d bg-primary-subtle border border-primary text-center">.col-12 .col-md-8</div></div>
  <div class="col-6 col-md-4"><div class="p-d bg-primary-subtle border border-primary text-center">.col-6 .col-md-4</div></div>
</div>
<!-- 50% on mobile, 33% on medium+ -->
<div class="row mb-d">
  <div class="col-6 col-md-4"><div class="p-d bg-primary-subtle border border-primary text-center">.col-6 .col-md-4</div></div>
  <div class="col-6 col-md-4"><div class="p-d bg-primary-subtle border border-primary text-center">.col-6 .col-md-4</div></div>
  <div class="col-6 col-md-4"><div class="p-d bg-primary-subtle border border-primary text-center">.col-6 .col-md-4</div></div>
</div>
<!-- Always 50% wide -->
<div class="row">
  <div class="col-6"><div class="p-d bg-primary-subtle border border-primary text-center">.col-6</div></div>
  <div class="col-6"><div class="p-d bg-primary-subtle border border-primary text-center">.col-6</div></div>
</div>

Offsets

Push a column to the right by adding a left margin equal to N columns. Use .col-offset-{n} for all sizes, or .col-offset-{sm|md|lg}-{n} for responsive offsets.

<div class="row mb-d">
  <div class="col-4"><div class="p-d bg-primary-subtle border border-primary text-center">.col-4</div></div>
  <div class="col-4 col-offset-4"><div class="p-d bg-primary-subtle border border-primary text-center">.col-4 .col-offset-4</div></div>
</div>
<div class="row mb-d">
  <div class="col-3 col-offset-3"><div class="p-d bg-primary-subtle border border-primary text-center">.col-3 .col-offset-3</div></div>
  <div class="col-3 col-offset-3"><div class="p-d bg-primary-subtle border border-primary text-center">.col-3 .col-offset-3</div></div>
</div>
<div class="row mb-d">
  <div class="col-6 col-offset-3"><div class="p-d bg-primary-subtle border border-primary text-center">.col-6 .col-offset-3</div></div>
</div>
<div class="row">
  <div class="col-sm-4 col-offset-md-2"><div class="p-d bg-primary-subtle border border-primary text-center">.col-sm-4 .col-offset-md-2</div></div>
  <div class="col-sm-6"><div class="p-d bg-primary-subtle border border-primary text-center">.col-sm-6</div></div>
</div>

Nesting

Place a new .row inside any column to create nested grids. Nested columns still reference the 12-column width of their parent column.

<div class="row">
  <div class="col-sm-9">
    <div class="p-d bg-primary-subtle border border-primary text-center">.col-sm-9</div>
    <div class="row mt-d">
      <div class="col-8 col-sm-6"><div class="p-d bg-primary-subtle border border-primary text-center">.col-8 .col-sm-6</div></div>
      <div class="col-4 col-sm-6"><div class="p-d bg-primary-subtle border border-primary text-center">.col-4 .col-sm-6</div></div>
    </div>
  </div>
  <div class="col-sm-3"><div class="p-d bg-primary-subtle border border-primary text-center">.col-sm-3</div></div>
</div>

Column ordering

Reorder columns visually without changing the DOM order. Use the flexbox .order-{0–5}, .order-first, and .order-last utilities on columns, or add .flex-row-reverse to the row to reverse all columns at once.

<!-- Reorder with .order-* -->
<div class="row mb-d">
  <div class="col order-3"><div class="p-d bg-primary-subtle border border-primary text-center">1st in source, order-3</div></div>
  <div class="col order-1"><div class="p-d bg-primary-subtle border border-primary text-center">2nd in source, order-1</div></div>
  <div class="col order-2"><div class="p-d bg-primary-subtle border border-primary text-center">3rd in source, order-2</div></div>
</div>
<!-- order-first / order-last -->
<div class="row mb-d">
  <div class="col order-last"><div class="p-d bg-primary-subtle border border-primary text-center">1st in source, order-last</div></div>
  <div class="col"><div class="p-d bg-primary-subtle border border-primary text-center">2nd in source</div></div>
  <div class="col order-first"><div class="p-d bg-primary-subtle border border-primary text-center">3rd in source, order-first</div></div>
</div>
<!-- Reverse entire row with .flex-row-reverse -->
<div class="row flex-row-reverse">
  <div class="col"><div class="p-d bg-primary-subtle border border-primary text-center">1st in source</div></div>
  <div class="col"><div class="p-d bg-primary-subtle border border-primary text-center">2nd in source</div></div>
  <div class="col"><div class="p-d bg-primary-subtle border border-primary text-center">3rd in source</div></div>
</div>

Alignment

Use flexbox alignment utilities directly on .row to align all columns vertically (align-items-*) or distribute them horizontally (justify-content-*).

<!-- align-items-start / center / end -->
<div class="row align-items-start mb-d" style="height:80px; background:var(--bg-2,rgba(0,0,0,.04))">
  <div class="col"><div class="p-d bg-primary-subtle border border-primary text-center">start</div></div>
  <div class="col"><div class="p-d bg-primary-subtle border border-primary text-center">start</div></div>
  <div class="col"><div class="p-d bg-primary-subtle border border-primary text-center">start</div></div>
</div>
<div class="row align-items-center mb-d" style="height:80px; background:var(--bg-2,rgba(0,0,0,.04))">
  <div class="col"><div class="p-d bg-primary-subtle border border-primary text-center">center</div></div>
  <div class="col"><div class="p-d bg-primary-subtle border border-primary text-center">center</div></div>
  <div class="col"><div class="p-d bg-primary-subtle border border-primary text-center">center</div></div>
</div>
<div class="row align-items-end mb-d" style="height:80px; background:var(--bg-2,rgba(0,0,0,.04))">
  <div class="col"><div class="p-d bg-primary-subtle border border-primary text-center">end</div></div>
  <div class="col"><div class="p-d bg-primary-subtle border border-primary text-center">end</div></div>
  <div class="col"><div class="p-d bg-primary-subtle border border-primary text-center">end</div></div>
</div>
<!-- justify-content-center / between -->
<div class="row justify-content-center mb-d">
  <div class="col-4"><div class="p-d bg-primary-subtle border border-primary text-center">.col-4 (centered)</div></div>
  <div class="col-4"><div class="p-d bg-primary-subtle border border-primary text-center">.col-4 (centered)</div></div>
</div>
<div class="row justify-content-between">
  <div class="col-4"><div class="p-d bg-primary-subtle border border-primary text-center">.col-4 (between)</div></div>
  <div class="col-4"><div class="p-d bg-primary-subtle border border-primary text-center">.col-4 (between)</div></div>
</div>

Gutter classes

Use .g-*, .gx-*, and .gy-* classes on a .row to control gutters via the spacing scale (0–5). These classes set --grid-gutter-x (horizontal) and/or --grid-gutter-y (vertical) on the row.

Class	Axis	Effect
.g-{0–5}	Both	Sets horizontal and vertical gutter
.gx-{0–5}	Horizontal	Sets column padding / row negative margin
.gy-{0–5}	Vertical	Sets row-gap between wrapped rows

All three families have responsive variants: .g-sm-*, .g-md-*, .g-lg-* (and likewise for .gx-* / .gy-*).

The scale maps to the project spacing scale:

Step	Value
0	0
1	--spacing-1 (× 0.25)
2	--spacing-2 (× 0.5)
3	--spacing-3 (× 1, default horizontal gutter)
4	--spacing-4 (× 1.5)
5	--spacing-5 (× 3)

<!-- .g-0: no gutter on either axis -->
<p class="mb-1"><code>.g-0</code></p>
<div class="row g-0 mb-d">
  <div class="col-4"><div class="p-d bg-primary-subtle border border-primary text-center">.col-4</div></div>
  <div class="col-4"><div class="p-d bg-primary-subtle border border-primary text-center">.col-4</div></div>
  <div class="col-4"><div class="p-d bg-primary-subtle border border-primary text-center">.col-4</div></div>
</div>
<!-- .gx-5: large horizontal gutter only -->
<p class="mb-1"><code>.gx-5</code></p>
<div class="row gx-5 mb-d">
  <div class="col-4"><div class="p-d bg-primary-subtle border border-primary text-center">.col-4</div></div>
  <div class="col-4"><div class="p-d bg-primary-subtle border border-primary text-center">.col-4</div></div>
  <div class="col-4"><div class="p-d bg-primary-subtle border border-primary text-center">.col-4</div></div>
</div>
<!-- .gy-3: vertical gutter only (columns wrap to show row gap) -->
<p class="mb-1"><code>.gy-3</code></p>
<div class="row gy-3 mb-d">
  <div class="col-8"><div class="p-d bg-primary-subtle border border-primary text-center">.col-8</div></div>
  <div class="col-8"><div class="p-d bg-primary-subtle border border-primary text-center">.col-8</div></div>
  <div class="col-8"><div class="p-d bg-primary-subtle border border-primary text-center">.col-8</div></div>
</div>
<!-- .g-2.g-lg-4: responsive gutters -->
<p class="mb-1"><code>.g-2 .g-lg-4</code></p>
<div class="row g-2 g-lg-4">
  <div class="col-6"><div class="p-d bg-primary-subtle border border-primary text-center">.col-6</div></div>
  <div class="col-6"><div class="p-d bg-primary-subtle border border-primary text-center">.col-6</div></div>
  <div class="col-6"><div class="p-d bg-primary-subtle border border-primary text-center">.col-6</div></div>
  <div class="col-6"><div class="p-d bg-primary-subtle border border-primary text-center">.col-6</div></div>
</div>