# CardGrid

> Responsive grid wrapper for Card / LinkCard children.

Source: https://shelldocs.shellui.dev/docs/components/card-grid

`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

```razor
<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.

```razor
<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.

```razor
<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

| Name | 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. |

## See also

- [Card](https://shelldocs.shellui.dev/docs/components/card.md): The tile primitive.
- [LinkCard](https://shelldocs.shellui.dev/docs/components/link-card.md): Always-a-link tile variant.