先选一个可读的最小宽度
卡片至少要放得下一行有意义的标题和两三行描述。先在较窄屏幕上检查文字,再决定列数,比从桌面尺寸反推所有断点更稳妥。
把布局交给容器
repeat 与 minmax 可以表达一组重复列;gap 负责相邻卡片之间的间距。网格布局与卡片内部排版分开处理,后面调整列数时,就不必同时改动全部内容。
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1rem;检查不同长度的内容
用最长标题、最短描述和多行标签分别试一次。不要依赖每张卡片恰好写同样多的文字。必要时让卡片自身使用弹性布局,把次要链接放在底部。