Grid Template Columns

Atomic Props	CSS Properties
gridTemplateColumns-{value}	grid-template-columns: repeat({value}, minmax(0px, 1fr));

Usage

Result

Loading...

Live Editor

<Box grid gridTemplateColumns-3 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 py1 rounded-4 toCenter bgTeal400> 5 </Box> <Box py1 rounded-4 toCenter bgTeal400> 6 </Box> <Box py1 rounded-4 toCenter bgTeal400> 7 </Box> <Box py1 rounded-4 toCenter bgTeal400> 8 </Box> <Box py1 rounded-4 toCenter bgTeal400> 9 </Box> </Box>

<Box grid gridTemplateColumns-3 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 py1 rounded-4 toCenter bgTeal400>
    5
  </Box>
  <Box py1 rounded-4 toCenter bgTeal400>
    6
  </Box>
  <Box py1 rounded-4 toCenter bgTeal400>
    7
  </Box>
  <Box py1 rounded-4 toCenter bgTeal400>
    8
  </Box>
  <Box py1 rounded-4 toCenter bgTeal400>
    9
  </Box>
</Box>