Grid

Grid is Flora's CSS grid layout component.

API Reference

Prop	Type	Default	Description
as	React.ElementType	undefined	The element or component to render.
children	React.ReactNode		Child nodes rendered inside the grid.
gap	Responsive<number \| string>	undefined	Gap between grid rows and columns.
columns	Responsive<string>		Value for `grid-template-columns` .
rows	Responsive<string>		Value for `grid-template-rows` .
areas	Responsive<string>		Value for `grid-template-areas` .
className	string		Class name merged into generated styles.
style	React.CSSProperties		Inline style object.
extend	unknown		Additional Fela style extension.

Baseline Grid

Box accepts a couple of properties that adhere to the baseline grid of 4 pixel.
That means the passed value will be multiplied by 4.
It affects the following props:

Examples

Dark Mode
Open in Playroom

<Grid columns={['1fr', '1fr 1fr 1fr']} gap={6}>
  <Box bg="primary" height={50} alignItems="center" justifyContent="center">
    <Text color="white">Flora</Text>
  </Box>
  <Box
    bg="eucalyptus200"
    height={50}
    alignItems="center"
    justifyContent="center">
    <Text>Design</Text>
  </Box>
  <Box bg="primary" height={50} alignItems="center" justifyContent="center">
    <Text color="white">System</Text>
  </Box>
</Grid>