Page Grid
Align page content to a shared column grid.
Preview
Import
import { PageGrid } from "@sigil-ui/components";Usage
<PageGrid showRails showCross className="min-h-64 overflow-hidden border border-[var(--s-border)] bg-[var(--s-background)]">
<div className="mx-auto max-w-md p-[var(--s-space-8)] text-center">
<div className="border border-[var(--s-border-strong)] bg-[var(--s-surface)] p-[var(--s-space-6)] text-sm text-[var(--s-text)]">Content aligned to the grid</div>
</div>
</PageGrid>Props
| Prop | Type | Default | Description |
|---|---|---|---|
showRails | boolean | — | Show vertical rail marks on left/right edges. |
showCross | boolean | — | Show cross marks at grid intersections. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-rail-gap | Rail gap |
--s-border-muted | Border muted |
--s-grid-cell | Grid cell |