Space Between

Atomic props for controlling the space between child elements.

Atomic Props	CSS Properties
spaceX-{value}	>*:not(:last-child) { margin-right: {value}}
spaceY-{value}	>*:not(:last-child) { margin-bottom: {value}}

Add horizontal space between children

Control the horizontal space between elements using the spaceX-{value} props.

Result

Loading...

Live Editor

<Box spaceX-10 row> <Box bgOrange400 rounded-8 square-100></Box> <Box bgOrange400 rounded-8 square-100></Box> <Box bgOrange400 rounded-8 square-100></Box> </Box>

<Box spaceX-10 row>
  <Box bgOrange400 rounded-8 square-100></Box>
  <Box bgOrange400 rounded-8 square-100></Box>
  <Box bgOrange400 rounded-8 square-100></Box>
</Box>

Add vertical space between children

Control the vertical space between elements using the spaceY-{value} props.

Result

Loading...

Live Editor

<Box spaceY-10 column> <Box bgOrange400 rounded-8 h-60></Box> <Box bgOrange400 rounded-8 h-60></Box> <Box bgOrange400 rounded-8 h-60></Box> </Box>

<Box spaceY-10 column>
  <Box bgOrange400 rounded-8 h-60></Box>
  <Box bgOrange400 rounded-8 h-60></Box>
  <Box bgOrange400 rounded-8 h-60></Box>
</Box>