Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width.
Change any prop and inspect the server-rendered component immediately.
<Grid />Compare configurations and resize the browser to check responsive behavior.
Arrange equal-width children with consistent gaps.
<Grid
columns="3">
<div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div>
</Grid>Use smaller gaps for dashboards and compact overview pages.
<Grid
size="compact"
columns="4"
gap="sm"
maxWidth="wide">
<div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span><span>Four</span></div>
</Grid>Use larger gaps for editorial or marketing split layouts.
<Grid
size="spacious"
gap="xl"
maxWidth="full">
<div class="showcase-grid-items"><span>Primary</span><span>Secondary</span></div>
</Grid>All content and behavior shown above is supplied through these props and slots.
| Prop | Type | Default | Required |
|---|---|---|---|
size | string | "default" | No |
color | string | "primary" | No |
columns | number | 2 | No |
gap | string | "md" | No |
maxWidth | string | "xl" | No |
minItemWidth | string | "" | No |
class | string | "" | No |