---
category: Layout
---

# Grid

The twelve-column grid. It is the tool for asymmetry, which is how this site composes a
band: a headline across 7 or 8 columns, its supporting copy across 4 or 5, offset against
each other rather than centred or evenly split.

Place children with Col. Do not nest a Grid inside a Col unless the inner block genuinely
has its own twelve-column structure.

```jsx
<Grid>
  <Col span={7}><Heading>Security is built in, not bolted on.</Heading></Col>
  <Col span={4} start={9}><Text measure>…</Text></Col>
</Grid>
```

Astro equivalent: `<div class="grid">`.