mostlycss
Theme

Grid

.grid

.grid — as many equal columns as fit, and never fewer than one.

Examples

As many as fit

View “As many as fit” as

One

Each column is at least --grid-min wide.

Two

How many fit is the grid's own width, not the window's.

Three

Drag the window narrower and they reflow with no breakpoint anywhere.

<div class="grid">
  <article class="card"><div class="card-body"><h3 class="card-title">One</h3>
    <p>Each column is at least <code class="code-inline">--grid-min</code> wide.</p></div></article>
  <article class="card"><div class="card-body"><h3 class="card-title">Two</h3>
    <p>How many fit is the grid's own width, not the window's.</p></div></article>
  <article class="card"><div class="card-body"><h3 class="card-title">Three</h3>
    <p>Drag the window narrower and they reflow with no breakpoint anywhere.</p></div></article>
</div>

No column count and no media query: you say how narrow a column may get and the number falls out of the width the grid actually has. The same markup gives three columns on a page and one in a drawer.

A denser grid of small things

View “A denser grid of small things” as
Lombardy Veneto Piedmont Liguria Tuscany Lazio 
<div class="grid grid-tight" style="--grid-min: 8rem">
  <span class="badge">Lombardy</span>
  <span class="badge">Veneto</span>
  <span class="badge">Piedmont</span>
  <span class="badge">Liguria</span>
  <span class="badge">Tuscany</span>
  <span class="badge">Lazio</span>
</div>

--grid-min is a floor, not a width: the columns grow past it to fill the row. --grid-gap is the other knob, and grid-tight is the one step down that most grids of small things want.

Tokens 2

Level 2, declared on .grid itself. Set any of them on that selector to restyle this utility without touching the skin.

Level 2 tokens declared by grid
TokenDefault
--grid-gapvar(--rhythm-block, 1.5rem)
--grid-min20rem

Variants and states

Variants

  • .grid-tight

Inside it

  • .grid-fill

State it reads

None.

Before you ship it

What you have to do 3 requirements

  1. Set --grid-min to the narrowest a column may usefully be, not to the width you want. It is a floor, and the columns grow past it: a --grid-min of 20rem in a 44rem column gives two columns of 22, not two of 20 and a gap of 4.
  2. Do not put stack on it. A margin on a grid child adds to the gap rather than replacing it, so the two rhythms compound. The gap is this primitive's, and --grid-gap is how you change it.
  3. Give it items, not text. Like every grid, it makes each child a grid item; a bare text node between two elements becomes an anonymous item of its own and lands in a column. Wrap running copy in an element, or use stack.

src/css/utilities/grid.css · npx mostlycss add grid