Skip to Content
Sponsor

Grid

A primitive useful for grid layouts. Grid is Box with display: grid and comes with helpful style shorthand. It renders a div element.

Import#

Usage#

Using the Grid components, here are some helpful shorthand props:

Verbose PropShorthand Prop
gridAreaarea
gridTemplateAreastemplateAreas
gridGapgap
gridRowGaprowGap
gridColumnGapcolumnGap
gridAutoColumnsautoColumns
gridColumncolumn
gridRowrow
gridAutoFlowautoFlow
gridAutoRowsautoRows
gridTemplateRowstemplateRows
gridTemplateColumnstemplateColumns

While you can pass the verbose props, using the shorthand can save you some time.

Editable Example

Props#

Grid composes Box so you can pass all the Box prop and related css grid props.

Edit this page