<Grid />

Grid is a layout component that makes creating CSS grid layouts easy.

Usage

Grid will render a div with display: grid by default, creating a grid container. You can then define additional grid properties using inline styles or classes.

01
02
03
<Grid backgroundColor='primary-100' style={{ gridTemplateColumns: 'repeat(3, minmax(100px, 1fr))' }} > <Block backgroundColor='primary-200' p={4} m={1}> 01 </Block> <Block backgroundColor='primary-200' p={4} m={1}> 02 </Block> <Block backgroundColor='primary-200' p={4} m={1}> 03 </Block> </Grid>

Shorthand props

Grid provides shorthand props for common grid alignment values for convenience:

  • align for alignItems
  • justify for justifyItems
01
02
03
<Grid backgroundColor='primary-100' justify='start' style={{ gridTemplateColumns: 'repeat(3, minmax(100px, 1fr))' }} > <Block backgroundColor='primary-200' p={4} m={1}> 01 </Block> <Block backgroundColor='primary-200' p={4} m={1}> 02 </Block> <Block backgroundColor='primary-200' p={4} m={1}> 03 </Block> </Grid>

Props

Name
Description
align

"center" | "start" | "end" | "stretch" | "baseline"
justify

"center" | "start" | "end" | "stretch"