Simple Grid
Arrange equal-width items in a responsive grid.
Preview
Import
import { SimpleGrid } from "@sigil-ui/components";Usage
<SimpleGrid columns={3} gap={16}>
<div className="p-4 border border-[var(--s-border)]">1</div>
<div className="p-4 border border-[var(--s-border)]">2</div>
<div className="p-4 border border-[var(--s-border)]">3</div>
</SimpleGrid>Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | number | — | Fixed number of columns. |
minChildWidth | number | string | — | Minimum child width for auto-fill responsive grid. Overrides columns. |
gap | number | string | — | Gap between items. |