洱海文档

外观

在 GitHub 上 Star遇到问题?喝杯奶茶

卡片容器

约 307 字大约 1 分钟

2025-12-24

当你需要将多个卡片排列, 可以使用<CardGrid>组件. 在空间足够时, 多个卡片会自动排列.

colsRequirednumber | { sm: number, md: number, lg: number }

2

卡片排列列数.

组件默认会根据屏幕宽度自动调整列数. 在空间足够时, 默认显示双列, 小屏幕下显示单列.

你可以通过cols配置列数. 当传入number时, 所有尺寸均显示为number个卡片.

传入{ sm: number, md: number, lg: number }时, 根据屏幕宽度自动调整列数.

  • sm : < 768px
  • md : >= 768px < 960px
  • lg : >= 960px

建议传入的number不超过3.

示例

<CardGrid>
  <Card title="卡片标题" icon="twemoji:astonished-face">
    这里是卡片内容。
  </Card>
  <Card title="卡片标题" icon="twemoji:astonished-face">
    这里是卡片内容。
  </Card>
</CardGrid>

<CardGrid>
  <LinkCard title="卡片标题" href="/" />
  <LinkCard icon="twemoji:astonished-face" title="卡片标题" href="/" />
</CardGrid>

卡片标题

这里是卡片内容。

卡片标题

这里是卡片内容。
卡片标题
卡片标题

版权归属：洱海

许可证：署名 4.0 国际 (CC-BY-4.0)