Generic Grid
Intent-based grid layout that replaces manual CSS with simple configuration.
Quickstart
- Ensure the registry is set up in Installation.
- Run the registry command:
npx shadcn@latest add https://gen-ui-eta-two.vercel.app/r/generic-gridWhy Generic Grid?
Generic Grid provides a clean API for responsive layouts, spacing, and alignment without sprinkling CSS throughout your components. It also exposes a GridItem helper for precise span and placement control.
Basic Usage
import { GenericGrid, GridItem } from "@/components/systems/generic-grid/generic-grid"
<GenericGrid columns={{ base: 1, md: 2, lg: 4 }} gap="md">
<GridItem colSpan={{ base: 1, md: 2 }}>Featured</GridItem>
<GridItem>Item</GridItem>
<GridItem>Item</GridItem>
<GridItem>Item</GridItem>
</GenericGrid>Auto-Fit Columns
Let the grid fit as many columns as possible based on min/max widths.
<GenericGrid
autoFit
minColumnWidth="240px"
maxColumnWidth="1fr"
gap="lg"
>
{cards.map((card) => (
<Card key={card.id} {...card} />
))}
</GenericGrid>GridItem Placement
Use spans or explicit start/end lines to control layout precisely.
<GenericGrid columns={6} gap="sm">
<GridItem colSpan={4}>Main</GridItem>
<GridItem colSpan={2}>Sidebar</GridItem>
<GridItem colStart={2} colEnd={6}>Banner</GridItem>
</GenericGrid>API Reference
| Prop | Type | Notes |
|---|---|---|
| columns | number | responsive | Grid column count |
| gap / rowGap / columnGap | SpacingToken | Spacing control |
| align / justify | Alignment | Row/column alignment |
| autoFit | boolean | Auto-fit columns |
| minColumnWidth / maxColumnWidth | string | Auto-fit sizing |
| GridItem.colSpan / rowSpan | number | responsive | Item span controls |
| GridItem.colStart / colEnd | number | responsive | Explicit placement |