# Grid

_Box Kite 2.2.5 · a markdown copy of https://www.box-kite.dev/grid/_

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

**Import**

```jsx
import Grid from '@box-kite/react/components/grid';
```

**Grid Layout**

```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](https://www.box-kite.dev/box.md) 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>` unless `tag` says 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.

---

_Every page: https://www.box-kite.dev/llms.txt · every prop, measured: https://www.box-kite.dev/props.md_