Grid

A Bootstrap-equivalent 12-column flexbox grid: containers, rows, columns, offsets, and a row-level auto-column shorthand most utility docs skip.

Containers

container grows its max-width at every breakpoint; container-fluid is always 100%; container-{bp} stays fluid until that breakpoint, then locks to a max-width and keeps it at every larger breakpoint too:

Class	max-width
`container`	fluid → 540px → 720px → 960px → 1140px → 1320px, at sm/md/lg/xl/xxl
`container-fluid`	always 100%
`container-sm`	fluid until 576px, then 540px→1320px climbing with viewport
`container-md`	fluid until 768px, then 720px→1320px
`container-lg`	fluid until 992px, then 960px→1320px
`container-xl`	fluid until 1200px, then 1140px→1320px
`container-xxl`	fluid until 1400px, then locks at 1320px

Rows & columns

Preview

<div class="row">
  <div class="col-4">1/3</div>
  <div class="col-4">1/3</div>
  <div class="col-4">1/3</div>
</div>

col-xs-* exists as an explicit alias of col-*

Since xs is the unprefixed default, col-xs-4 and col-4 compile to the exact same rule — the xs form exists only for readers coming from frameworks that always spell out the smallest breakpoint.

row-cols — auto-sizing columns by count

Rather than sizing every child column individually, put row-cols-{n} on the row and every direct child is sized to 1/n automatically. Goes from row-cols-1 to row-cols-6 (not 12), plus row-cols-auto, all responsive:

<div class="row row-cols-3">
  <div class="col">1/3</div>
  <div class="col">1/3</div>
  <div class="col">1/3</div>
</div>

Offsets

offset-0 through offset-11, all responsive:

Preview

Gutters

g/gx/gy set the --st-gutter-x/--st-gutter-y custom properties .row and .container read — same 0–5 scale as everything else, all responsive:

Preview

This is the same mechanism as the gap utilities, but not the same property

Gutters don't set gap — the grid uses negative margins on .row and matching padding on .row > *, both driven by these two custom properties. See the Spacing page for the actual gap/row-gap/col-gap utilities, which are a different mechanism entirely.