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.
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.
A responsive Grid is a server component, the same as a responsive Flex: every breakpoint value that has a utility class — a column count, a spacing token, hide, position, overflow, opacity, zIndex — is written as one, so the layout is right in the first paint and no LayoutProvider is needed. Only a value a class cannot hold (a width, a number of rems for spacing, aspectRatio or style) moves the grid to the client, exactly where Flex moves too.
When the column count should follow the space rather than the breakpoint, give a minimum width instead: minColumnWidth fits as many columns as there is room for, each at least that wide, and the grid reflows on its own as the container changes — inside a sidebar, a dialog or a full page alike.
It takes what minWidth takes: a number is rem, a string is a spacing token or a CSS unit. The grid stays a server component — the value is a .columns-auto-fit class plus a --grid-min-column-width custom property on the same element, not a style object. A narrow container never overflows: a single column shrinks below the minimum rather than spilling out.
minColumnWidth wins over columns, and a breakpoint columns still wins over it at that width, so minColumnWidth={16} s={{ columns: 1 }} is auto-fit everywhere except on a phone.
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