Card Grid
Responsive grid layout for cards. Content component — wraps in Section on pages. 2 or 3 column variants with container query breakpoints.
3-Column Grid (default)
Default columns=3. Stacks to 1 column at narrow, 2 at @sm, 3 at @lg. Uses container queries so it adapts to the grid's own width, not the viewport.
Design Tokens
OKLCH palette, semantic colors, type scale, spacing, shadows — all in one CSS file.
Components
Semantic HTML + Tailwind. Interactive by default. Container query responsive.
Data Layer
SQLite + Drizzle ORM. Schema-driven pages with typed queries.
2-Column Grid
columns=2 for wider cards or fewer items.
Open Source
MIT licensed. Fork it, extend it, make it yours. Community-driven development.
Zero Runtime
Static HTML output. No framework JavaScript ships to the browser.
Mixed Variants
CardGrid is variant-agnostic — mix card variants freely within the same grid.
Default
Standard bordered card in a grid context.
Elevated
Shadow-based depth, lifts on hover.
Flat
Subtle tinted background for low-emphasis.
Flat
Another flat card to show wrapping behavior.
Default
Wraps to the next row naturally.
Elevated
Six cards filling two complete rows.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | 2 | 3 | 3 | Number of columns at wide container width |
| class | string | — | Additive classes on the outer container |