Grid is a Box that allows grid system props. Visit CSS Tricks' guide to Grids for more on its usage.

Example

 
1
2
3
4
5
6
 
<Grid bg="#fff" gridTemplateColumns="100px 100px 100px" gridGap="12px">
    <Box bg="blue.0">1</Box>
    <Box bg="blue.0">2</Box>
    <Box bg="blue.0">3</Box>
    <Box bg="blue.0">4</Box>
    <Box bg="blue.0">5</Box>
    <Box bg="blue.0">6</Box>
</Grid>
<Grid bg="#fff" gridTemplateColumns="100px 100px 100px" gridGap="12px">
    <Box bg="blue.0">1</Box>
    <Box bg="blue.0">2</Box>
    <Box bg="blue.0">3</Box>
    <Box bg="blue.0">4</Box>
    <Box bg="blue.0">5</Box>
    <Box bg="blue.0">6</Box>
</Grid>

Common Props

Grid includes COMMON, GRID, and BORDER props. Read Common Props for details and API. These common props will override component props such as the color.

Component Props