Dev Tools

Columns

Equal-width CSS grid layout primitive. Splits content into 1–4 columns with a fixed gap. Columns never collapse — desktop-only.

Import

import Columns from '../../components/utility/Columns.astro';

Props

PropTypeRequiredDefaultDescription
count 1 | 2 | 3 | 4 Yes — Number of equal-width columns

Usage

<Columns count={2}>
  <Card />
  <Card />
</Columns>

<Columns count={3}>
  <Thumbnail />
  <Thumbnail />
  <Thumbnail />
</Columns>

Live examples

count={1}

1

count={2}

1
2

count={3}

1
2
3

count={4}

1
2
3
4

Notes

  • Uses display: grid with grid-template-columns: repeat(N, 1fr) — all columns have equal width.
  • Gap is fixed at --primitive-spacing-16. No prop to override — one system-wide rhythm.
  • No responsive collapse. At narrow viewports columns shrink but stay side-by-side (hub is desktop-only).
  • For image galleries where a single child caps at half or third width, use ImageRow instead.
Page tokens