70 lines
1.8 KiB
Markdown
70 lines
1.8 KiB
Markdown
---
|
|
title: Card Grid
|
|
icon: vaadin:grid-h
|
|
createTime: 2025/10/08 23:38:33
|
|
permalink: /en/guide/components/card-grid/
|
|
---
|
|
|
|
## Overview
|
|
|
|
The `<CardGrid>` component is used when multiple cards need to be arranged. Cards are automatically arranged when sufficient space is available.
|
|
|
|
## Props
|
|
|
|
:::: field-group
|
|
::: field name="cols" type="number | { sm: number, md: number, lg: number }" default="2"
|
|
|
|
Number of columns for card arrangement.
|
|
|
|
The component automatically adjusts the number of columns based on screen width by default.
|
|
Two columns are displayed when space permits, while a single column is shown on smaller screens.
|
|
|
|
The `cols` prop configures the number of columns. When a `number` is provided,
|
|
all screen sizes display `number` columns. When `{ sm: number, md: number, lg: number }` is provided,
|
|
the number of columns adjusts automatically based on screen width.
|
|
|
|
- `sm` : `< 768px`
|
|
- `md` : `>= 768px < 960px`
|
|
- `lg` : `>= 960px`
|
|
|
|
It is recommended that the provided `number` does not exceed `3`.
|
|
|
|
:::
|
|
::::
|
|
|
|
## Examples
|
|
|
|
**Input:**
|
|
|
|
```md :no-line-numbers
|
|
<CardGrid>
|
|
<Card title="Card Title" icon="twemoji:astonished-face">
|
|
This is the card content.
|
|
</Card>
|
|
<Card title="Card Title" icon="twemoji:astonished-face">
|
|
This is the card content.
|
|
</Card>
|
|
</CardGrid>
|
|
|
|
<CardGrid>
|
|
<LinkCard title="Card Title" href="/" />
|
|
<LinkCard icon="twemoji:astonished-face" title="Card Title" href="/" />
|
|
</CardGrid>
|
|
```
|
|
|
|
**Output:**
|
|
|
|
<CardGrid>
|
|
<Card title="Card Title" icon="twemoji:astonished-face">
|
|
This is the card content.
|
|
</Card>
|
|
<Card title="Card Title" icon="twemoji:astonished-face">
|
|
This is the card content.
|
|
</Card>
|
|
</CardGrid>
|
|
|
|
<CardGrid>
|
|
<LinkCard title="Link Card" href="/" />
|
|
<LinkCard icon="twemoji:astonished-face" title="Link Card" href="/" />
|
|
</CardGrid>
|