yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity
vuepress-theme-plume/docs/en/guide/components/card-grid.md
pengzhanbo 385059f214
docs: update en docs (#708) 
* docs: update en docs

* chore: tweak

* chore: tweak

* chore: tweak
2025-10-09 15:46:05 +08:00

1.8 KiB
Raw Blame History

title, icon, createTime, permalink
title icon createTime permalink
Card Grid vaadin:grid-h 2025/10/08 23:38:33 /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:

<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:

This is the card content. This is the card content.