Layout

Flora ships a couple of layout components that will help implement any design.

Box

Box is the most common and most used layout component.
It implements flexbox properties and has special 

space
prop for spacing between children.

Open in Playroom
<Box space={5} direction="row">
  <Box padding={10} extend={{ backgroundColor: 'grey' }} />
  <Box
    padding={10}
    space={3}
    direction="row"
    extend={{ backgroundColor: 'grey' }}>
    <Box padding={10} extend={{ backgroundColor: 'lightgrey' }} />
    <Box padding={10} extend={{ backgroundColor: 'lightgrey' }} />
  </Box>
</Box>

Grid

Grid implements CSS grid layouts.
It should only be used when flexbox is not sufficient for the job.

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>

Spacer

Spacer renders space within flexbox containers.
It is a great component for single unique spaces, but for repeating spacings e.g. when rendering an array of children, use Box's 

space
instead.

Open in Playroom
<Box>
  Hello <Spacer size={20} />
  World
</Box>

El

El renders an unstyled component.
It can be used to create special layouts such as tables.

Open in Playroom
<El as="table">
  <El as="tr">
    <El as="td" extend={{ border: '1px solid green' }}>
      Hello
    </El>
    <El as="td" extend={{ border: '1px solid green' }}>
      World
    </El>
  </El>
</El>