homepage_relaunch/.design-sync/ds-src/Col.md

category

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.

<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.