Grid

Puts a set of like items, such as cards, stats or charts, into equal columns: as many as fit, one on a phone.

<script setup lang="ts">
import { FsCard, FsGrid } from '@fivespark/ui'
</script>

<template>
  <FsGrid as="ul" class="w-full">
    <li><FsCard title="Offerte 2026-041">Acme Bouw BV</FsCard></li>
    <li><FsCard title="Offerte 2026-042">De Vries Installatietechniek</FsCard></li>
    <li><FsCard title="Offerte 2026-043">Jansen Bouw B.V.</FsCard></li>
    <li><FsCard title="Offerte 2026-044">Bakker BV</FsCard></li>
  </FsGrid>
</template>

Usage

<script setup lang="ts">
import { FsCard, FsGrid } from '@fivespark/ui'
</script>

<template>
  <FsGrid as="ul">
    <li v-for="offerte in offertes" :key="offerte.id">
      <FsCard :title="offerte.nummer">…</FsCard>
    </li>
  </FsGrid>
</template>

The columns follow the space the grid has, not the screen, so it also works in a card or a drawer. A main column beside a side column is your page's own layout, not a grid.

Examples

Wider columns

min sets how narrow a column may get: narrow for figures, medium for cards (the default), wide for charts. A column is at least 192, 256 or 384 pixels wide, so in a narrow frame wide shows the same single column as the default. columns caps the count.

<script setup lang="ts">
import { FsCard, FsGrid } from '@fivespark/ui'
</script>

<template>
  <FsGrid min="wide" :columns="2" class="w-full">
    <FsCard title="Omzet per maand">€ 84.300 in oktober</FsCard>
    <FsCard title="Marge per product">Gemiddeld 22 procent</FsCard>
  </FsGrid>
</template>

Narrow columns

<script setup lang="ts">
import { FsGrid, FsStat } from '@fivespark/ui'
</script>

<template>
  <FsGrid min="narrow" class="w-full">
    <FsStat label="Open offertes" :value="14" />
    <FsStat label="Orders deze week" :value="38" />
    <FsStat label="Nieuwe klanten" :value="5" />
  </FsGrid>
</template>

An ordered list

Use as="ul" for a set of items and as="ol" when their order means something. Without either it is a div.

<script setup lang="ts">
import { FsCard, FsGrid } from '@fivespark/ui'
</script>

<template>
  <FsGrid as="ol" :columns="3" class="w-full">
    <li><FsCard title="Opmeten">Dinsdag 10 november</FsCard></li>
    <li><FsCard title="Produceren">Week 47</FsCard></li>
    <li><FsCard title="Plaatsen">Donderdag 26 november</FsCard></li>
  </FsGrid>
</template>

API Reference

FsGrid

Prop	Type	Default	Description
as	"div" | "ul" | "ol"	"div"	The element: `ul` for a set of items, `ol` when their order means something. Write the `li`s yourself.
min	"wide" | "narrow" | "medium"	"medium"	How narrow a column may get: `narrow` 192px for figures, `medium` 256px for cards, `wide` 384px for charts.
columns	2 | 3 | 4 | 5 | 6		The most columns, however wide the grid. Without it, as many as fit.

Slot	Props	Description
default	any	The items, one to a cell. In a list grid, the `li`s.