用 CSS Grid 排列自适应卡片

文章列表和项目卡片经常需要多列布局。CSS Grid 可以根据容器宽度自动调整列数，减少手写多个断点的工作。

使用 minmax 设置列宽范围

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}

每列至少需要约 15rem 的宽度，空间充足时平分剩余区域；容器变窄时，列数会自动减少。

检查内容变化

布局测试时不要只看相同长度的标题。把较长标题、空描述和较窄视口也放进页面，确认卡片高度与阅读顺序仍然清楚。

什么时候用 Flexbox

单行导航、按钮组等一维排列常用 Flexbox；需要同时控制行和列时，Grid 通常更直接。两者可以按布局关系组合使用。