CardGrid
Responsive grid of cards — column count and gap are parameterised
SSR mode
Examples
Two columns
Card 1
Card 2
Card 3
Card 4
Three columns (default)
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Four columns, small gap
Card 1
Card 2
Card 3
Card 4
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| CardGrid | A responsive CSS grid wrapper for card layouts. Column count and gap are parameterised via the shared Columns and Size enums. Breakpoint logic is centralised in ColumnsClasses.Grid so Tailwind scans literal class strings. Children are plain <div> or Blok card components. |
CardGrid
A responsive CSS grid wrapper for card layouts. Column count and gap are parameterised via the shared Columns and Size enums. Breakpoint logic is centralised in ColumnsClasses.Grid so Tailwind scans literal class strings. Children are plain <div> or Blok card components.
| Property | Type | Required | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | Card elements to place in the grid. | |
| ClassName | string? | Extra CSS classes appended to the title container. | |
| Columns | Columns | Number of columns (responsive). Default: Columns.Three (grid-cols-1 sm:grid-cols-2 lg:grid-cols-3). Mapped through ColumnsClasses.Grid. | |
| Gap | Size | Grid gap. Default: Size.Md (gap-4). Mapped through SizeClasses.Gap. |