Space Between

Atomic props for controlling the space between child elements.

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

Add horizontal space between children

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

Result

Loading...

Live Editor

<Box gap-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 gap-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 gap-{value} props.

Result

Loading...

Live Editor

<Box gap-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 gap-10 column>
  <Box bgOrange400 rounded-8 h-60></Box>
  <Box bgOrange400 rounded-8 h-60></Box>
  <Box bgOrange400 rounded-8 h-60></Box>
</Box>