Grid

Grid lays out direct children in a fixed number of equal columns. Use it when you know how many columns the layout should have. Read Layout to choose a layout component.

Prefer AutoGrid when columns should grow from a minimum inline size instead of an explicit count.

Spanning columns

Child placement belongs to the child. Use Box grid-placement props such as gridColumn when an item should span more than one track. Grid itself does not expose a span API.

Responsive columns and spans

columns accepts a responsive object with a required initial value. Child spans must fit the active explicit column count at every responsive condition. A span that is valid at bp768 can overflow the initial column count if those values are not kept in sync.

Choose the rendered element

Grid uses Box's elementType and render contract.

API