Library · Foundations

Grid

Responsive card/feed grid — auto-fits columns to a minimum item width by default, or holds an explicit count that collapses at the section breakpoints (900px / 560px).

Default

---
import Grid from "../components/primitives/layout/Grid.astro";
---
<Grid minItemWidth="220px" gap="m">
  <div class="box">auto-fit</div>
  <div class="box">min 220px</div>
  <div class="box">wraps as</div>
  <div class="box">space allows</div>
</Grid>

Columns

---
import Grid from "../components/primitives/layout/Grid.astro";
---
<Grid columns={3} gap="m">
  <div class="box">columns={3}</div>
  <div class="box">holds 3-up</div>
  <div class="box">then collapses</div>
  <div class="box">3 → 2 (900px)</div>
  <div class="box">→ 1 (560px)</div>
  <div class="box">TeamFeed pattern</div>
</Grid>

Props

Name	Type	Required	Description
`minItemWidth`	`string`	—	Auto-fit mode: minimum item width before wrapping (any CSS length) (default: '320px')
`columns`	`2 \| 3 \| 4`	—	Explicit mode: fixed column count, collapses 4→2→1 / 3→2→1 / 2→1. Overrides minItemWidth.
`gap`	`'5xs' \| '4xs' \| '3xs' \| '2xs' \| 'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| '2xl' \| '3xl' \| '4xl' \| '5xl'`	—	Gap between items as a --space-* token name (default: 'l')
`class`	`string`	—	Additional classes
`[key: string]`	`unknown`	—	HTML attributes
`(slot)`	`children`	—	Grid items.

Example with all props

<Grid minItemWidth="320px" gap="l">…</Grid>

<!-- Explicit mode: fixed count, collapses 3→2→1 -->
<Grid columns={3} gap="l" class="team-cards">…</Grid>