Layout

Grid

Columns that fill the width and reflow on their own, or a row that scrolls and snaps.

Ferns
Hostas
Grasses

Code

HTML

<ul class="grid grid--xs" role="list">
  <li class="card"><p class="text">Ferns</p></li>
  <li class="card"><p class="text">Hostas</p></li>
  <li class="card"><p class="text">Grasses</p></li>
</ul>

Why it exists

A set of like things should fill the space it’s given, whatever that space turns out to be. So a Grid has no breakpoints. It takes a minimum width for an item and fits as many columns as it can.

That also makes it hold up under zoom. Zooming in narrows the space in CSS terms, so the columns drop away by themselves and nothing overflows. A column count is only a maximum, and an item still won’t go below its minimum.

The carousel is the same list in one row, scrolled by the browser. It adds no script and no arrows, so trackpads, touch and focus all work as they do on any other scroller.

When to use

For a set of like items (Cards, link lists) in as many columns as fit.
For a row that scrolls, with --carousel.
Not for two panes of different widths: that is a Split.
Not for one row or column of things: that is an Inline, a Cluster or a Stack.
Not for data: that is a Table.

Rules

Lists: a list grid loses its markers, so give it role="list".
Carousel: scrolls by trackpad, touch, or the keyboard as focus moves through its items. If the items hold nothing focusable, give the Grid tabindex="0" and an aria-label so keyboard users can scroll it. Smooth scrolling only without reduced motion.
Container variants need a container ancestor (.container-inline, a Card, the Header, a Split); without one they never apply.

As Many Columns as Fit

As many columns as fit, each at least 16rem.

Astrantia
Brunnera

Code

HTML

<ul class="grid grid--xs" role="list">
  <li class="card"><p class="text">Astrantia</p></li>
  <li class="card"><p class="text">Brunnera</p></li>
</ul>

At Most a Number of Columns

At most three columns, each at least 16rem.

Spring

Summer

Autumn

Code

HTML

<div class="grid grid--3-col grid--xs">
  <div class="card"><p class="text">Spring</p></div>
  <div class="card"><p class="text">Summer</p></div>
  <div class="card"><p class="text">Autumn</p></div>
</div>

One column, three once its container is 48rem wide.

Sun

Part shade

Full shade

Code

HTML

<div class="container-inline">
  <div class="grid @3xl:grid--3-col">
    <div class="card"><p class="text">Sun</p></div>
    <div class="card"><p class="text">Part shade</p></div>
    <div class="card"><p class="text">Full shade</p></div>
  </div>
</div>

One Row That Scrolls

Each Card holds a Link, so focus scrolls the row.

Code

HTML

<ul class="grid grid--carousel grid--xs" role="list">
  <li class="card"><a href="/ferns" class="link link--plain link--stretched">Ferns</a></li>
  <li class="card"><a href="/hostas" class="link link--plain link--stretched">Hostas</a></li>
  <li class="card"><a href="/grasses" class="link link--plain link--stretched">Grasses</a></li>
  <li class="card"><a href="/bulbs" class="link link--plain link--stretched">Bulbs</a></li>
  <li class="card"><a href="/climbers" class="link link--plain link--stretched">Climbers</a></li>
  <li class="card"><a href="/shrubs" class="link link--plain link--stretched">Shrubs</a></li>
</ul>

Do and Don’t

Do	Don’t
Give the Grid a maximum column count and let it reflow.	Set columns at viewport breakpoints.
Give a list grid `role="list"`.	Leave a list without its role once its markers are gone.
Make a carousel of unfocusable items a named tab stop.	Leave a row that keyboard users can’t scroll.
Give container variants a container ancestor.	Expect `@3xl:` to apply with no container.
Use `--gap` and `--grid-min` on the Grid itself.	Expect them to reach a nested grid.

In Storybook

Grid variants and states

Menu

Grid

Why it exists

When to use

Rules

As Many Columns as Fit

At Most a Number of Columns

One Row That Scrolls

Do and Don’t

In Storybook

See also

Search the docs