Sigil Page Grid

Preview

Import

import { SigilPage, SigilPageGrid } from "@sigil-ui/components";

Usage

SigilPageGrid is the top-level page layout grid. It provides a 12-column system with structural-visibility overlays — the grid lines, cross marks, and gutter patterns that make Sigil's design language visible.

For application pages, prefer SigilPage. It wraps SigilPageGrid with the rhythm/chrome API:

<SigilPage rhythm="locked" chrome="rails">
  <SigilSection>Content</SigilSection>
</SigilPage>

<SigilPageGrid>
  <SigilGridCell span={8}>
    <Card>Main content</Card>
  </SigilGridCell>
  <SigilGridCell span={4}>
    <Card>Sidebar</Card>
  </SigilGridCell>
</SigilPageGrid>

Content origin

SigilPageGrid establishes the vertical measurement origin for structural rhythm. The content column is marked with:

<div data-layout="sigil-content" class="sigil-page-content" />

SigilSection, Divider, and the grid-alignment audit all measure from this origin. If this attribute is missing in a running app, section snapping and divider phase alignment cannot work.

See Structural Grid Rhythm for the full contract and browser verification workflow.

With visible grid

<SigilPageGrid showGrid showCross>
  <SigilGridCell span={6}>Left half</SigilGridCell>
  <SigilGridCell span={6}>Right half</SigilGridCell>
</SigilPageGrid>

Token integration

Props