Skip to main content
xoji

Grid
Info:Layout html svelte astro Success: coverage 9/9

A two-dimensional CSS grid: fixed columns or responsive auto-fit, with a token-driven gap.

Live demo

live · @xoji/astro

Grid

Fixed columns

columns=4 lays out four equal-width tracks; cells flow into the next row automatically.

12345678

Responsive auto-fit

minColWidth="14rem" fits as many tracks as the container allows — resize the page to watch the column count change.

components

33

categories

8

tokens produced

216

coverage

100%

Real content grid

The same primitive composes cards into a gallery — every cell shares one token-driven gutter.

xoji-default

 algorithm

A blessed derivation pack — anchors and knobs in, a full token set out.

xoji-hc

 algorithm

A blessed derivation pack — anchors and knobs in, a full token set out.

xoji-quiet

 algorithm

A blessed derivation pack — anchors and knobs in, a full token set out.

Grid arranges its children in a CSS grid with a token-driven gap (0–8). Two sizing modes cover most needs: pass columns (1–12) for a fixed equal-width column count, or pass minColWidth for a responsive auto-fit track that packs as many columns as fit at or above that minimum and reflows as the container resizes.

When both are set minColWidth wins. align and justify control how items sit within their cells. Like the other layout primitives it adds spacing and structure but no color or chrome of its own.

When to use

How this component composes with the rest of the set.

The two-dimensional layout primitive; reach for Stack or Cluster when one axis is enough.
Use fixed columns for known layouts (a 3-up card row) and minColWidth for responsive galleries that reflow on resize.
Drop Cards, media, or any content into the cells; Grid imposes structure, not chrome.

Props

6 props, straight from the manifest.

PropTypeDefaultBindingsDescription
gap number
0 1 2 3 4 5 6 7 8
4
html svelte astro
Spacing between grid cells, as a step on the `--space` scale (0–8).
columns number
1 2 3 4 5 6 7 8 9 10 11 12
—
html svelte astro
Fixed number of equal-width columns (1–12). Ignored when `minColWidth` is set.
minColWidth string —
html svelte astro
Responsive mode: minimum track width (e.g. `16rem`) for an `auto-fit` column count. Takes precedence over `columns`.
align GridAlign
start center end stretch
—
html svelte astro
How items align within their cells on the block axis (`align-items`).
justify GridAlign
start center end stretch
—
html svelte astro
How items align within their cells on the inline axis (`justify-items`).
inline boolean false
html svelte astro
Renders as an inline-grid instead of a block-level one.

Anatomy

The named parts that make up the component, with their selectors.

root

 .xoji-grid

The CSS grid container carrying the gap, column, align, and justify classes.
--space-4

Tokens & coverage

What the component consumes, checked live against what the algorithm produces.

Success:fully covered 9/9 consumed tokens produced default register: 276 tokens

Live coverage check against the xoji-default register (derive(xojiDefault, { anchors }) → coverComponent(manifest, register)). Every token this component consumes must be a key the algorithm produces.

--space-0 --space-1 --space-2 --space-3 --space-4 --space-5 --space-6 --space-7 --space-8

Slots
default
html svelte astro

The children to lay out in grid cells.

Accessibility
A generic presentational container with no implicit semantics; it adds no roles and announces nothing.
CSS grid does not change DOM order, so keyboard and reading order follow source order; keep source order meaningful.

Code

Fixed and responsive columns

A fixed three-column grid, then a responsive auto-fit grid driven by a minimum track width.

 
<xoji-grid columns="3" gap="4">
	<xoji-card>One</xoji-card>
	<xoji-card>Two</xoji-card>
	<xoji-card>Three</xoji-card>
</xoji-grid>

<xoji-grid min-col-width="16rem" gap="3">
	<xoji-card>Auto-fit</xoji-card>
	<xoji-card>responsive</xoji-card>
	<xoji-card>columns</xoji-card>
</xoji-grid>
 
<script lang="ts">
	import { Grid, Card } from "@xoji/svelte";
</script>

<Grid columns={3} gap={4}>
	<Card>One</Card>
	<Card>Two</Card>
	<Card>Three</Card>
</Grid>

<Grid minColWidth="16rem" gap={3}>
	<Card>Auto-fit</Card>
	<Card>responsive</Card>
	<Card>columns</Card>
</Grid>
 
---
import { Grid, Card } from "@xoji/astro";
---

<Grid columns={3} gap={4}>
	<Card>One</Card>
	<Card>Two</Card>
	<Card>Three</Card>
</Grid>

<Grid minColWidth="16rem" gap={3}>
	<Card>Auto-fit</Card>
	<Card>responsive</Card>
	<Card>columns</Card>
</Grid>