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

Usage with refs

If you need to pass a ref to Grid, use a RefGrid:

import { useRef } from 'react'
import { RefGrid } from 'componentry'

function LayoutWithRef() {
  const ref = useRef(null)
  return <RefGrid ref={ref} p={4}></RefGrid>
}

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