Grid

Updated: September 14, 2026

Grid is the two-dimensional counterpart to Flex. Reach for it when children should line up in both directions — a card gallery, a pricing table, a stat row — rather than flow along one. Everything that is not flex-specific works exactly as it does on Flex: the same spacing, size, surface, display and text props, and the same breakpoint objects. Only the two below are its own.

Columns

1

2

3

4

5

6

<Grid fillWidth columns="3" m={{ columns: 2 }} s={{ columns: 1 }} gap="12">
  ...
</Grid>

Three across, two on a tablet, one on a phone. The breakpoint objects cascade down, so m also covers s and xs unless one of them says otherwise.

Prop	Type	Default
columns How many equal columns. Set it per breakpoint to reflow.	110234812567911	—
rows How many equal rows. Usually left alone — rows follow from the content.	110234812567911	—

Responsive

Prop	Type	Default
xl Overrides applied at the xl breakpoint and below.	GridBreakpointProps	—
l Overrides applied at the l breakpoint and below.	GridBreakpointProps	—
m Overrides applied at the m breakpoint and below.	GridBreakpointProps	—
s Overrides applied at the s breakpoint and below.	GridBreakpointProps	—
xs Overrides applied at the xs breakpoint.	GridBreakpointProps	—
…and every FlexProps prop	inherited	—

Everything else

Grid takes the same shared props as Flex. They are documented once, on the Flex page:

Size — fill, maxWidth, aspectRatio
Spacing — gap, padding, margin
Surface — background, border, radius, shadow
Display and behaviour — as, hide, overflow, zIndex
Text — onBackground, align

Flex — one-dimensional layout, and the shared prop reference
MasonryGrid — for items of uneven height
Structure — how a page is composed from these

ComponentsFlex

ComponentsButton

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club

Grid

Columns

Responsive

Everything else

Related