用 CSS Grid 组织一组卡片

从内容需要多少空间出发,让网格自然适应屏幕。

2026.11.04前端与网页短篇笔记
文档与工具的抽象插图

先选一个可读的最小宽度

卡片至少要放得下一行有意义的标题和两三行描述。先在较窄屏幕上检查文字,再决定列数,比从桌面尺寸反推所有断点更稳妥。

把布局交给容器

repeat 与 minmax 可以表达一组重复列;gap 负责相邻卡片之间的间距。网格布局与卡片内部排版分开处理,后面调整列数时,就不必同时改动全部内容。

display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1rem;

检查不同长度的内容

用最长标题、最短描述和多行标签分别试一次。不要依赖每张卡片恰好写同样多的文字。必要时让卡片自身使用弹性布局,把次要链接放在底部。

继续读