Grid

Atom
The container-measured auto-fit tile grid. minTileWidth sets the floor (default 240): the grid fits as many equal-width columns of at least that width as its own measured container allows, and re-fits as the container changes, so the same grid renders three-up on a desktop, two-up on a tablet, and a single column on a phone with no breakpoint at the call site.
src/atoms/grid
View in Layout

Playground

Every control sets a real prop of GridProps. The JSX below updates as you go.
Overview
Deploys
Alerts
Props
columns
number
3
Gap
pick one
flow
boolean
JSX · GridProps
<Grid columns={3} />

Variants

4 examples from src/atoms/grid/grid.md, each rendered live from its own JSX.
Production
Staging
Preview
Capped columns
<Grid minTileWidth={200} columns={2}>
<Card title="Production" />
<Card title="Staging" />
<Card title="Preview" />
</Grid>
Latency
Errors
Throughput
Wide tile
<Grid minTileWidth={200} columns={3}>
<GridItem wide>
<Card title="Latency" />
</GridItem>
<Card title="Errors" />
<Card title="Throughput" />
</Grid>
Uptime
99.98% over the last 30 days.
Incidents
One partial outage on the EU edge, resolved in 14 minutes; a postmortem is scheduled for Thursday.
On call
Priya, until 09:00.
Equal heights
Uneven content, one bottom edge: each card fills the height of its row.
<Grid minTileWidth={200} columns={3}>
<Card title="Uptime" description="99.98% over the last 30 days." />
<Card title="Incidents" description="One partial outage on the EU edge, resolved in 14 minutes; a postmortem is scheduled for Thursday." />
<Card title="On call" description="Priya, until 09:00." />
</Grid>
CPU
Memory
Disk
Tight gap
<Grid minTileWidth={160} tight>
<Card title="CPU" />
<Card title="Memory" />
<Card title="Disk" />
</Grid>

Anatomy

Overview
Deploys
Alerts
1
Grid
2
Tile
Dimmed parts appear only in some states or variants.

Props

32 props on GridProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
24 props
flow
boolean
false
Natural card heights with the original Argus subpixel width allowance.
rowsCozy
boolean
false
Separate vertical rhythm for wrapped rows.
rowsSection
boolean
false
fine
boolean
false
dense
boolean
false
compact
boolean
false
close
boolean
false
nested
boolean
false
comfortable
boolean
false
balanced
boolean
false
roomy
boolean
false
airy
boolean
false
spacious
boolean
false
generous
boolean
false
section
boolean
false
panel
boolean
false
page
boolean
false
apart
boolean
false
The step between side-by-side panels of one composition (32).
ample
boolean
false
The step between a section page's hero and its body, and between the hero's halves (40).
broad
boolean
false
The gap between the two halves of a page-wide split (48): the hand-off's hero grid.
chapter
boolean
false
The widest gap step (64), between a page's chapters; wins over every other step.
children
ReactNode
–
minTileWidth
number
240
Minimum tile width in px (default 240): the grid fits as many columns of at least this width as its measured container allows (auto-fit).
columns
number
–
Column cap: never more than this many columns (the desktop count). The count still drops below the cap as the container narrows, so a capped grid still collapses to one column on phones.
Gap scale
pick one
8 props
flush
boolean
false
tight
boolean
false
snug
boolean
false
cozy
boolean
false

Accessibility and keyboard

Keyboard
Not focusable. It has no interaction of its own and takes the semantics of what it wraps.
Semantics
No role of its own in source; it reads as the content it renders.

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Latency
Errors
Throughput
Web
control 10 · field 10 · card 16 · Instrument Sans
Latency
Errors
Throughput
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Latency
Errors
Throughput
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<Grid minTileWidth={220}>
<Card title="Overview" />
<Card title="Deploys" />
<Card title="Alerts" />
</Grid>
columns caps the count at the desktop number, the gap scale is Row and Column's own (flush / tight / snug / cozy / relaxed / loose), and a GridItem child with wide spans two cells. The grid spans its parent's full width (it is a FILL component, so it needs no wrapper to reach the edges), and its tiles are equal-height as well as equal-width: every cell stretches to the height of the row it wrapped onto, and a Card in a cell grows to fill it, so a row of cards shares a flush bottom edge however unevenly their content runs (CSS Grid's align-items: stretch). A field or a hug component keeps its own height. Equal-width tiles belong here; content-sized rows that should stack at narrow widths belong to Row stacks.
flow preserves natural card heights and the original Argus one-pixel allowance when fitting columns. GridItem full spans a whole row; raised and front keep banner and lifted-card shadows above adjacent cells. rowsCozy and rowsSection set the vertical rhythm to 12 or 26 independently of the horizontal gap.
The shared gap scale also includes comfortable (10), roomy (14), generous (22), panel (28), apart (32), ample (40, the step under a section page's hero) and broad (48), preserving the original application layout measurements, and Row and Column's widest step, chapter (64), which wins over every other step.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--fd
--fm
--ft
--ion-ring
--ion-soft
--ion-tx
--ln2

Related components