Grid & Container

Which grid

Sulphuris ships two. .grid + .col-* is the default — flexbox, twelve columns, responsive widths, offsets and gutters. Use it for page layout and anything column-shaped.

Reach for native CSS grid (.d-grid + .grid-cols-* + .gap-*) when you need two-dimensional control: equal-height rows, row templates, item spanning.

They compose — a .col-6 can be a .d-grid.

Container

.container centers content with max-width: 105rem (1680px at the default root — the same width as the xxl breakpoint, which is why the two convert together) and horizontal padding that switches at the lg breakpoint:

<div class="container">…</div>

Grid row

.grid is a display: flex; flex-flow: row wrap wrapper. It has no gutter by itself.

Add .grid-gutter to apply negative side margins that cancel the column padding, producing consistent gutters between columns without extra math on the outside edges:

The full gutter values are $grid-gutter-mobile: 16px and $grid-gutter: 32px — each side gets half. The halving happens in px and only the finished value converts to rem, so the row's negative margin and the column's padding can never round to different units.

.grid-gutter and .container can be combined on the same element. When combined, the padding accounts for both the container offset and the half-gutter:

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

Columns — .col-N

12 columns. Width is a percentage: 100 / 12 * N.

.col-1   →  8.333…%
.col-2   → 16.666…%
.col-3   → 25%
.col-4   → 33.333…%
.col-6   → 50%
.col-8   → 66.666…%
.col-9   → 75%
.col-12  → 100%

Classes exist for every integer 1–12.

Responsive columns — .col-{bp}-N

Each column class has a breakpoint variant that applies at min-width. Breakpoints:

The base .col-N (no breakpoint) applies at all widths. Layer responsive classes on top for wider viewports:

<!-- Full width on mobile, half at md, third at lg -->
<div class="col-12 col-md-6 col-lg-4">…</div>

Full responsive example — the twelve columns are drawn behind it, so press the width buttons and watch each card land on twelve, six and four of them:

<div class="grid grid-gutter container">
  <div class="col-12 col-md-6 col-lg-4"><div class="bg-gray-200 p-16">Card A</div></div>
  <div class="col-12 col-md-6 col-lg-4"><div class="bg-gray-200 p-16">Card B</div></div>
  <div class="col-12 col-md-12 col-lg-4"><div class="bg-gray-200 p-16">Card C</div></div>
</div>

Offsets — .col-offset-N

Pushes a column right by adding margin-left as a percentage of the parent. Range: 0–11.

.col-offset-0   → margin-left: 0%
.col-offset-1   → margin-left: 8.333…%
.col-offset-6   → margin-left: 50%
.col-offset-11  → margin-left: 91.666…%

Responsive variants follow the same pattern: .col-offset-{bp}-N.

<div class="grid grid-gutter">
  <div class="col-6 col-offset-3"><div class="bg-gray-200 p-16">Centered 6-column block</div></div>
</div>

.grid-reverse

Add .grid-reverse to a .grid row to set flex-direction: row-reverse. When .grid-reverse is present, offset classes switch from margin-left to margin-right, so offsets keep working visually in the reversed direction.

Flex-only — flex-direction does nothing on a .d-grid container. Native grid reverses with direction: rtl or explicit line placement.

<div class="grid grid-gutter grid-reverse">
  <div class="col-4 col-offset-2"><div class="bg-gray-200 p-16">Pushed from the right</div></div>
</div>

Max-width columns — .col-N-max

.col-N-max caps an element's max-width to N columns' worth of the largest breakpoint (xxl, 1680px), accounting for container offsets and gutters. Range: 1–11 (.col-12-max is not generated; use the container's full width instead).

The value is computed in px from the max breakpoint width minus container padding on both sides plus one gutter unit, scaled by the column fraction, then converted once at the end:

desktop: (1680 - 56×2 + 32) × (N/12)  →  1600 × (N/12)
mobile:  (1680 - 16×2 + 16) × (N/12)  →  1664 × (N/12)

Examples (desktop):

.col-6-max   → max-width: 50rem    (800px)
.col-4-max   → max-width: ~33.3rem (~533px)
.col-3-max   → max-width: 25rem    (400px)

Use .col-N-max when you want an element to grow freely on small screens but never exceed the proportional column width at full desktop scale.

<img class="col-6-max" src="photo.jpg" alt="">

Native CSS grid

Separate from the 12-column flex system above, these utilities drive a real display: grid container.

Every class in this section spells out the axis as column / row, never col — matching .flex-column in Flexbox, and keeping the flex grid's .col-* namespace clear.

All of them generate responsive variants, with the breakpoint before the value: .grid-cols-md-3, .grid-column-span-lg-4, .grid-flow-md-column.

Track templates

Columns run 1–12 ($columns), rows 1–6 ($rows). Rows stop at 6 on purpose: grid-template-rows only does visible work on a container with a definite height, and templates that deep are rare. Raise $rows if you need more.

The minmax(0, 1fr) — rather than plain 1fr — is what stops a long word or a wide <pre> from blowing a track past its share.

Pair with the .gap-* utilities for gutters.

<div class="d-grid grid-cols-1 grid-cols-md-3 gap-16">
  <div class="bg-gray-200 p-16">Cell A</div>
  <div class="bg-gray-200 p-16">Cell B</div>
  <div class="bg-gray-200 p-16">Cell C</div>
</div>

Rows need a height to divide, so give the container one:

<div class="d-grid grid-rows-3 gap-8 h-100vh">
  <header>Fixed third</header>
  <main>Fixed third</main>
  <footer>Fixed third</footer>
</div>

Item spans

{n} matches the track ranges — 1–12 for columns, 1–6 for rows. -full spans the first line to the last regardless of how many tracks the container has, which is the one that survives a change to .grid-cols-*.

<div class="d-grid grid-cols-3 gap-16">
  <div class="grid-column-span-full bg-gray-200 p-16">Full-width heading</div>
  <div class="grid-column-span-2 bg-gray-200 p-16">Two thirds</div>
  <div class="bg-gray-200 p-16">One third</div>
</div>

Auto-flow — .grid-flow-*

Controls where items land when they have no explicit placement.

row is the CSS default — the class exists to undo a column set at a narrower breakpoint. dense backfills holes left by spanning items instead of leaving gaps, at the cost of items appearing out of source order (which is also what it does to keyboard and screen-reader order, so use it for galleries, not for content that has to be read in sequence).

.grid-flow-dense on its own is row dense. The two combined forms exist because grid-auto-flow is one property — .grid-flow-column.grid-flow-dense cannot work, the second class just wins.

<!-- Masonry-ish gallery: no gaps, source order not guaranteed -->
<div class="d-grid grid-cols-4 gap-8 grid-flow-row-dense">
  <img class="grid-column-span-2" src="wide.jpg" alt="">
  <img src="a.jpg" alt="">
  <img src="b.jpg" alt="">
</div>

Alignment

place-items and place-content set both axes at once — the row axis (align-*) and the column axis (justify-*) — so .place-center is a one-class replacement for .align-center.justify-center.

Prefix: place Property: place-items

Prefix: place-content Property: place-content

place-items aligns each item inside its own track; place-content aligns the track grid as a whole inside the container. Both prefixes generate responsive variants (.place-md-center, .place-content-lg-start).

<div class="d-grid grid-cols-3 gap-16 place-center">
  <div class="bg-gray-200 p-16">Centered in its cell</div>
  <div class="bg-gray-200 p-16">Centered in its cell</div>
  <div class="bg-gray-200 p-16">Centered in its cell</div>
</div>