<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.

<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

<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