Grid

A shortcut component for display: grid with powerful layout features.

Import

JSX

import Grid from '@cronocode/react-box/components/grid';

Grid Layout

Cell

colspan 2

colspan full row

Cell

colstart 2

colstart 2 / colspan 2

colstart 3 / colend 5
colend hover 6

JSX

<Grid borderRadius={1} gap={4} p={4} gridTemplateColumns={4} bgColor="violet-900" color="white">
  <Box bgColor="violet-400" borderRadius={1} p={6} px={4}>
    Cell
  </Box>
  <Box bgColor="violet-400" borderRadius={1} p={6} px={4} gridColumn={2}>
    colspan 2
  </Box>
  <Box bgColor="violet-400" borderRadius={1} p={6} px={4} gridColumn="full-row">
    colspan full row
  </Box>
  <Box bgColor="violet-400" borderRadius={1} p={6} px={4}>
    Cell
  </Box>
  <Box bgColor="violet-400" borderRadius={1} p={6} px={4}>
    Cell
  </Box>
  <Box bgColor="violet-400" borderRadius={1} p={6} px={4} gridColumnStart={2}>
    colstart 2
  </Box>
  <Box bgColor="violet-400" borderRadius={1} p={6} px={4} gridColumn={3} gridColumnStart={1}>
    colstart 2 / colspan 2
  </Box>
  <Box bgColor="violet-400" borderRadius={1} p={6} px={4} gridColumnStart={2} gridColumnEnd={4} hover={{ gridColumnEnd: 5 }}>
    colstart 3 / colend 5 <br /> colend hover 6
  </Box>
</Grid>