Card 1
Supporting text.
Grid
Equal columns that fill the row and wrap on their own, with no breakpoints, for groups of cards, tiles and form fields.
Example
Card 2
Supporting text.
Card 3
Supporting text.
Card 4
Supporting text.
Card 5
Supporting text.
Card 6
Supporting text.
1
2
3
4
5
6
7
8
Show the markup
<div class="kit-stack" data-gap="5">
<ul class="kit-grid demo-list" data-min="xs" data-cols="3" aria-label="Example cards"><li><article class="kit-card"><header class="kit-card-header"><h3>Card 1</h3></header><div class="kit-card-body"><p>Supporting text.</p></div></article></li><li><article class="kit-card"><header class="kit-card-header"><h3>Card 2</h3></header><div class="kit-card-body"><p>Supporting text.</p></div></article></li><li><article class="kit-card"><header class="kit-card-header"><h3>Card 3</h3></header><div class="kit-card-body"><p>Supporting text.</p></div></article></li><li><article class="kit-card"><header class="kit-card-header"><h3>Card 4</h3></header><div class="kit-card-body"><p>Supporting text.</p></div></article></li><li><article class="kit-card"><header class="kit-card-header"><h3>Card 5</h3></header><div class="kit-card-body"><p>Supporting text.</p></div></article></li><li><article class="kit-card"><header class="kit-card-header"><h3>Card 6</h3></header><div class="kit-card-body"><p>Supporting text.</p></div></article></li></ul>
<div class="kit-grid" data-min="xs" data-cols="4" data-gap="2"><div class="demo-box">1</div><div class="demo-box">2</div><div class="demo-box">3</div><div class="demo-box">4</div><div class="demo-box">5</div><div class="demo-box">6</div><div class="demo-box">7</div><div class="demo-box">8</div></div>
</div>
Usage
<div class="kit-grid" data-min="sm" data-cols="3">
<article class="kit-card">…</article>
<article class="kit-card">…</article>
<article class="kit-card">…</article>
</div>
The grid fits as many columns as it can, each at least data-min wide, up to data-cols per row. As the container narrows, columns drop off one at a time until there's one, so it works the same in a page, a sidebar or a dialog.
| Attribute | Values | Default |
|---|---|---|
data-min |
xs 8rem, sm 12rem, md 16rem, lg 20rem, xl 26rem |
md |
data-cols |
2, 3, 4, 6: the most columns per row |
as many as fit |
data-fit |
present to stretch a short last row to fill the width | keeps columns even |
data-gap |
0 to 6, a step of the spacing scale (0, 4, 8, 12, 16, 24, 32px) |
4 |
A child with data-span="full" takes a whole row, for a heading inside the grid.
Accessibility
- Layout only, in source order: people read and tab through items left to right, row by row, just as they're drawn.
- When the items are a list of things (cards for each result, say), use
<ul class="kit-grid">with<li>s, so screen readers say how many there are.