学习笔记：用 CSS Grid 做响应式卡片布局

原创学习笔记，整理用 CSS Grid 做卡片列表时常用的布局写法与取舍。

做产品列表、文章卡片这类“多卡片平铺”页面时，Flexbox 需要手动算宽度和换行，Grid 一行声明就能解决大部分问题。

1. 自动填充列数

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

• 原理：auto-fill 按容器宽度自动算出能放几列，minmax(240px, 1fr) 保证每列不小于 240px、有剩余空间时均分。
• 体会：不用写媒体查询就能在手机、平板、桌面上各自排布合理的列数；卡片数量不整除时最后一行不会被拉伸变形。

2. 卡片内部用子网格对齐

卡片里标题、摘要、底部操作栏高度不一时，整行卡片底部会对不齐：

.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

中间摘要区占 1fr，底部按钮自然沉底，同一行卡片视觉上整齐很多。

3. 跨列的特色卡

第一张卡想做大图推荐位时，不用单独写一套布局：

.card.featured {
  grid-column: span 2;
}

窄屏下 span 2 可能超宽，可在小屏媒体查询里改回 span 1，只保留一处例外规则。

小结

个人小项目的推荐组合：外层 auto-fill + minmax 自动分列，卡片内 auto 1fr auto 三行对齐，特色卡用 span 2 点缀。布局代码不到 20 行，改列宽、改间距都只动一处。下次打算实测一下 subgrid 在嵌套卡片里的对齐效果。