CardGrid
CardGrid lays out a set of Card or LinkCard children on a CSS grid, responsive by default : the grid collapses to one column on narrow viewports.
Basic use
One
First card.
Two
Second card.
Three
Third card.
Four
Fourth card.
<CardGrid Columns="2">
<Card Title="One" Description="First card." />
<Card Title="Two" Description="Second card." />
<Card Title="Three" Description="Third card." />
<Card Title="Four" Description="Fourth card." />
</CardGrid>Column counts
Columns controls the desktop column count. Common values are 2, 3, 4. The layout still collapses to one column on mobile regardless.
A
B
C
<CardGrid Columns="3">
<Card Title="A" />
<Card Title="B" />
<Card Title="C" />
</CardGrid>Mixing children
CardGrid doesn't care what kind of card lives inside it : you can mix Card and LinkCard, or drop custom markup in.
Static tile
No link, no arrow.
Linked tile
Arrow on the right, whole card is a link.
<CardGrid Columns="2">
<Card Title="Static tile" Description="No link, no arrow." />
<LinkCard Title="Linked tile" Description="Arrow on the right, whole card is a link." Href="/docs/introduction" />
</CardGrid>Props
| Prop | Type | Default | Description |
|---|---|---|---|
Columns |
int |
2 |
Desktop column count. The CSS falls back to a single column on narrow viewports. |
ChildContent |
RenderFragment? |
— |
Cards to lay out. |