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

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

Sets an `align-items` style

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

Sets a `justify-items` style

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