Grid
A shortcut component for display: grid with powerful layout features.
Import
JSX
import Grid from '@box-kite/react/components/grid';Grid Layout
Cell
colspan 2
colspan full row
Cell
Cell
colstart 2
colstart 2 / colspan 2
colstart 3 / colend 5
colend hover 6
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>Grid props
Everything below is this component’s own. All 235 of Box’s style props work on it too, and those are on /box rather than repeated here.
Grid adds no props of its own — it is a Box with one thing decided for it.Grid accessibility
- A
<div>unlesstagsays otherwise. Placing an item in a track does not move it in the markup, so the tab order and a screen reader still follow source order — WCAG 1.3.2, and the reason a grid that reads correctly is laid out in the order it reads.
Swept with axe on every release, in this state:
Grid. No violations, with contrast and landmark rules left to a human. Screen-reader results are not published yet.