Layout Primitives
Grid
A CSS Grid layout component with configurable columns, gap, and auto-fill/auto-fit modes. Use Grid to create responsive multi-column layouts for cards, features, and content sections.
Column Counts
columns={2}
1
2
3
4
columns={3}
1
2
3
4
5
6
columns={4}
1
2
3
4
5
6
7
8
Gap Variants
gap="sm"
1
2
3
gap="lg"
1
2
3
Responsive Auto-Fill
Auto-fill with minimum child width
Card 1
Card 2
Card 3
Card 4
Card 5
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
columns | 1 | 2 | 3 | 4 | 5 | 6 | "auto-fill" | "auto-fit" | 1 | Number of grid columns, or auto-fill/auto-fit for responsive layouts. |
gap | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "md" | Controls the spacing between grid items. |
minChildWidth | string | — | Minimum child width for auto-fill/auto-fit columns (e.g. "200px"). |
render | ReactElement | — | Render a different element instead of a wrapping div, merging this component's props onto it (e.g. render={<section />}). |
Import
import { Grid } from "@mikenotthepope/substrateui"