Grid
A two-dimensional CSS grid: fixed columns, responsive auto-fit, or a content-plus-rail shell.
Live demo
Grid arranges its children with a token-driven gap (0–8). Three sizing modes cover most needs: pass columns (1–12) for a fixed equal-width column count, minColWidth for a responsive auto-fit track that packs as many columns as fit at or above that minimum, or sidebar for the asymmetric two-track shell — content beside a fixed-width rail, the layout behind a document with an outline, an editor with an inspector, or a list with a detail pane.
sidebar takes precedence over both, and minColWidth reads as the main column's floor under it: the pair stacks when the main column would be forced narrower, and never stacks if it is omitted. Otherwise minColWidth wins over columns. 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.
columns for known layouts (a 3-up card row) and minColWidth for responsive galleries that reflow on resize. sidebar for the application shell — a document beside its outline, a canvas beside its inspector — and reach for Splitter instead only when the divider should be draggable, since that trades a static track for a gesture surface and its persistence. min-width: 0 on a sidebar child: that is the property carrying the main column's floor, so cancelling it replaces the stack with a squeeze, and a column crushed to a few dozen pixels reads as a broken layout rather than a missing one. Props
8 props, straight from the manifest.
| Prop | Type | Default | Bindings | Description |
|---|---|---|---|---|
--space scale (0–8). | ||||
minColWidth is set. | ||||
16rem) for an auto-fit column count. Takes precedence over columns. Under sidebar it reads as the main column's floor instead, below which the pair stacks; the floor is carried as the child's own min-inline-size, so a stylesheet setting min-width: 0 on that child cancels it and the pair squeezes instead of stacking. | ||||
18rem), with the other child taking the remainder. Takes precedence over columns and minColWidth. | ||||
sidebar mode: end reads it as the last child, start as the first. | ||||
align-items). | ||||
justify-items). No effect in sidebar mode, where the two tracks are sized to fill the row. | ||||
Anatomy
The named parts that make up the component. A ::part() handle is reachable from your own stylesheet; the class beside it is the component's internal selector, which a shadow boundary keeps to itself.
root
The CSS grid container carrying the gap, column, align, and justify classes.
Tokens & coverage
What the component consumes, checked live against what the algorithm produces.
Live coverage check against the xtyle-default register
(derive(xtyleDefault, { 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-8Slots
The children to lay out in grid cells.
Accessibility
side moves the rail between the first and last track without reordering the DOM, so the visual and tab orders stay in agreement whichever one you pick. Code
Fixed and responsive columns
A fixed three-column grid, then a responsive auto-fit grid driven by a minimum track width.
<xtyle-grid columns="3" gap="4">
<xtyle-card>One</xtyle-card>
<xtyle-card>Two</xtyle-card>
<xtyle-card>Three</xtyle-card>
</xtyle-grid>
<xtyle-grid min-col-width="16rem" gap="3">
<xtyle-card>Auto-fit</xtyle-card>
<xtyle-card>responsive</xtyle-card>
<xtyle-card>columns</xtyle-card>
</xtyle-grid><script lang="ts">
import { Grid, Card } from "@xtyle/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 "@xtyle/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>Content beside a fixed rail
A rail at a fixed width with the content taking the remainder, stacking once the content would be squeezed under its floor, then the same shell with the rail first.
<xtyle-grid sidebar="18rem" min-col-width="22rem" gap="4">
<xtyle-card>The document</xtyle-card>
<xtyle-card>The outline</xtyle-card>
</xtyle-grid>
<xtyle-grid sidebar="14rem" side="start" gap="4">
<xtyle-card>The rail, first in source order</xtyle-card>
<xtyle-card>The content beside it</xtyle-card>
</xtyle-grid><script lang="ts">
import { Grid, Card } from "@xtyle/svelte";
</script>
<Grid sidebar="18rem" minColWidth="22rem" gap={4}>
<Card>The document</Card>
<Card>The outline</Card>
</Grid>
<Grid sidebar="14rem" side="start" gap={4}>
<Card>The rail, first in source order</Card>
<Card>The content beside it</Card>
</Grid>---
import { Grid, Card } from "@xtyle/astro";
---
<Grid sidebar="18rem" minColWidth="22rem" gap={4}>
<Card>The document</Card>
<Card>The outline</Card>
</Grid>
<Grid sidebar="14rem" side="start" gap={4}>
<Card>The rail, first in source order</Card>
<Card>The content beside it</Card>
</Grid>