Grid

data-grid turns any block into a row of equal columns. Cards in it stretch to the same height, so side-by-side columns start and end together.

Basic

<div data-grid="3">
  <article><h3>Pages</h3><p>182 built this morning, one with a warning.</p><small>Fresh</small></article>
  <article><h3>Links</h3><p>Three point at a guide that no longer exists.</p><small>Needs work</small></article>
  <article><h3>Assets</h3><p>Images are copied as they are until the resize step lands.</p><small>Planned</small></article>
</div>

Four and five columns drop to two under 900px, and everything drops to one under 560px.

Uneven columns

<div data-grid="2:1">
  <article data-tone="card"><h3>Build log</h3><p>Every page atlas rendered, newest first, with the time it took.</p></article>
  <article data-tone="info"><h3>Next up</h3><p>Check the three missing links, then deploy before the release window.</p></article>
</div>

2:1 and 1:2 give a main column and a side column; both stack under 900px.

Notes

• The values are 2, 3, 4, 5, 2:1 and 1:2; 2 is the default when you leave the value out.
• Children get min-width: 0, so a long path or a wide table inside a cell cannot push the grid sideways.
• A <ul> or <ol> with data-grid loses its bullets and padding, so a grid of list items needs no extra CSS.
• Set --s72-gap to change the space between cells, on the page or on one grid.