---
category: Layout
---

# Col

One block on the grid. `span` is how many of the twelve columns it occupies; `start` is the
column it begins at, counting from 1.

Use `start` to leave a gap. An offset block is the house style: content that begins at
column 7 or 9 rather than immediately after its neighbour reads as deliberate, and the empty
columns are doing work.

A full-width block is `span={12}`, which is also the default.

```jsx
<Col span={5} start={8}>
  <Text measure>Every interface between components is an attack surface.</Text>
</Col>
```

Astro equivalent: `<div style="grid-column: 8 / span 5;">`. Grid positions are the one place
a raw number is allowed; every other value comes from a token.