Grid is a layout component that makes creating CSS grid layouts easy.
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>
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>
}
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>
align
Sets an `align-items` style
"start" | "end" | "center" | "baseline" | "stretch"
justify
Sets a `justify-items` style
"start" | "end" | "center" | "stretch"