Grid

A minimal auto-placed CSS-grid primitive. The parent owns the grid (columns + gap) and every direct child flows into an equal cell — the children need no per-cell prop. Works with any content. For variable-width cells, bring your own grid + col-span-*; FieldGroup is the field-specific sibling.

Basic — fixed columns

One

Two

Three

Four

Five

Six

<script>
  import { Grid } from '@spaethtech/svelte-ui';
</script>

<Grid columns={3} gap={4}>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <!-- …each child = one auto-placed cell -->
</Grid>

Responsive columns

Pass a per-breakpoint map — the grid reflows as the viewport changes (resize to see 1 → 2 → 4).

One

Two

Three

Four

Five

Six

<Grid columns={{ base: 1, sm: 2, lg: 4 }} gap={4}>
  <div>One</div>
  <div>Two</div>
  <!-- … -->
</Grid>

Any content — cards

First card in the grid.

Second card in the grid.

Third card in the grid.

<Grid columns={{ base: 1, md: 3 }} gap={4}>
  <Card title="Alpha">First card in the grid.</Card>
  <Card title="Beta">Second card in the grid.</Card>
  <Card title="Gamma">Third card in the grid.</Card>
</Grid>

Gap

A single Tailwind step is symmetric; { x, y } sets column/row gaps independently.

gap=2

One

Two

Three

Four

Five

Six

gap=8

One

Two

Three

Four

Five

Six

gap={{ x: 6, y: 2 }} — wide columns, tight rows

One

Two

Three

Four

Five

Six

<Grid columns={3} gap={2}>…</Grid>
<Grid columns={3} gap={8}>…</Grid>
<Grid columns={3} gap={{ x: 6, y: 2 }}>…</Grid>