Components / Layout
Grid
Repeated items in a fixed column count, with predictable wrapping.
Basic structure
div.grid.grid-3 > repeated itemsItem 1
A repeated item in a predictable grid.
Item 2
A repeated item in a predictable grid.
Item 3
A repeated item in a predictable grid.
Item 4
A repeated item in a predictable grid.
HTML
<div class="grid grid-3"><article class="card"><div class="content"><h3 class="like-h4">Item 1</h3><p>A repeated item in a predictable grid.</p></div></article><article class="card"><div class="content"><h3 class="like-h4">Item 2</h3><p>A repeated item in a predictable grid.</p></div></article><article class="card"><div class="content"><h3 class="like-h4">Item 3</h3><p>A repeated item in a predictable grid.</p></div></article><article class="card"><div class="content"><h3 class="like-h4">Item 4</h3><p>A repeated item in a predictable grid.</p></div></article></div>Options
| Class or attribute | What it does |
|---|---|
grid-2 / grid-3 | Desktop column count; one column on mobile. |
is-centered | Center incomplete rows without stretching items. |
is-bento | Three-column composition with explicit spans. |
span-2 / row-span-2 | Child spans; horizontal spans reset on mobile. |