Columns

A generic N-column CSS grid layout that supports three column patterns: equal columns (number), asymmetric layouts (string), and responsive auto-fit (object). Each direct child becomes one column.

File: src/core/components/primitives/Columns.astro

Props

Prop	Type	Default	Notes
columns	number | string | AutoFitPattern	2	Number: equal columns. String: explicit grid-template-columns. Object: auto-fit/fill.
gap	"none" | "sm" | "md" | "lg" | "xl"	"md"	Gap between columns using primitive space tokens
collapseBelow	"sm" | "md" | "lg" | "xl" | "2xl" | "none"	"md"	Breakpoint below which columns collapse to single column. "none" to never collapse.
class	string	—	Additional CSS classes

AutoFitPattern: { count: "auto-fit" | "auto-fill"; min: string }

Usage

---
import Columns from "@core/components/primitives/Columns.astro";
---

{/* Equal columns (default: 2) */}
<Columns>
  <div>Column 1</div>
  <div>Column 2</div>
</Columns>

{/* Three equal columns */}
<Columns columns={3}>
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</Columns>

{/* Asymmetric layout */}
<Columns columns="2fr 1fr">
  <div>Wide column</div>
  <div>Narrow sidebar</div>
</Columns>

{/* Auto-fit responsive */}
<Columns columns={{ count: "auto-fit", min: "16rem" }}>
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
</Columns>

{/* Never collapse */}
<Columns columns={3} collapseBelow="none">
  <div>Always three columns</div>
  <div>Even on mobile</div>
  <div>No collapse</div>
</Columns>

{/* Collapse below lg instead of md */}
<Columns columns={2} collapseBelow="lg">
  <div>Left</div>
  <div>Right</div>
</Columns>

Accessibility

• Renders as a plain <div> with CSS grid — no ARIA roles needed for layout.
• All column patterns collapse to a single column below the collapseBelow breakpoint (default "md" / 768px) for mobile readability.
• Set collapseBelow="none" to prevent collapse — useful for fixed layouts that should persist at all viewport widths.
• No keyboard interaction required — purely presentational layout.