Preview

Import

import { SigilGrid, SigilGridCell } from "@sigil-ui/components";

Usage

<SigilGrid columns={4}>
  <SigilGridCell className="p-4 border border-[var(--s-border)]">A</SigilGridCell>
  <SigilGridCell className="p-4 border border-[var(--s-border)]">B</SigilGridCell>
  <SigilGridCell className="p-4 border border-[var(--s-border)]">C</SigilGridCell>
  <SigilGridCell className="p-4 border border-[var(--s-border)]">D</SigilGridCell>
</SigilGrid>

SigilGrid is for local component grids and decorative cell layouts. It is not the page shell. For full pages, use:

<SigilPage rhythm="locked" chrome="rails">
  <SigilSection space="normal">...</SigilSection>
</SigilPage>

Use SigilGrid inside sections when you need a compact grid with visible cell intersections.

Sub-components

This component includes the following parts:

<SigilGridCell>

Props

Prop	Type	Default	Description
`columns`	`2 \| 3 \| 4 \| 5 \| 6`	`3`	Number of columns.
`gap`	`string \| number`	—	Gap between cells.

Token integration

CSS Variable	Purpose
`--s-grid-cell`	Grid cell
`--s-border`	Border
`--s-grid-cell-radius`	Grid cell radius
`--s-radius-sm`	Radius sm
`--s-duration-normal`	Duration normal
`--s-surface-elevated`	Surface elevated

Sigil Grid