Gap

Atomic Props	CSS Properties
gap-{value}	gap: {value};
rowGap-{value}	row-gap: {value};
columnGap-{value}	column-gap: {value};

Gap

Result

Loading...

Live Editor

<Box grid gridTemplateColumns-2 gap-20 white fontBold textXL> <Box py1 rounded-4 toCenter bgTeal400> 1 </Box> <Box py1 rounded-4 toCenter bgTeal400> 2 </Box> <Box py1 rounded-4 toCenter bgTeal400> 3 </Box> <Box py1 rounded-4 toCenter bgTeal400> 4 </Box> </Box>

<Box grid gridTemplateColumns-2 gap-20 white fontBold textXL>
  <Box py1 rounded-4 toCenter bgTeal400>
    1
  </Box>
  <Box py1 rounded-4 toCenter bgTeal400>
    2
  </Box>
  <Box py1 rounded-4 toCenter bgTeal400>
    3
  </Box>
  <Box py1 rounded-4 toCenter bgTeal400>
    4
  </Box>
</Box>

Row Gap and Column Gap

Result

Loading...

Live Editor

<Box grid gridTemplateColumns-2 rowGap-10 columnGap-20 white fontBold textXL> <Box py1 rounded-4 toCenter bgTeal400> 1 </Box> <Box py1 rounded-4 toCenter bgTeal400> 2 </Box> <Box py1 rounded-4 toCenter bgTeal400> 3 </Box> <Box py1 rounded-4 toCenter bgTeal400> 4 </Box> </Box>

<Box grid gridTemplateColumns-2 rowGap-10 columnGap-20 white fontBold textXL>
  <Box py1 rounded-4 toCenter bgTeal400>
    1
  </Box>
  <Box py1 rounded-4 toCenter bgTeal400>
    2
  </Box>
  <Box py1 rounded-4 toCenter bgTeal400>
    3
  </Box>
  <Box py1 rounded-4 toCenter bgTeal400>
    4
  </Box>
</Box>