用 display: grid + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 可同时实现等宽等高，auto-fit 使列数自适应容器宽度，minmax 确保每列最小宽280px且均分剩余空间，grid 天然等高，需避免卡片内 height/min-height 干扰。
直接用 display: grid + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 就能同时实现等宽和等高，不需要额外 hack 或 JS。
为什么 auto-fit + minmax 是必须的写法
这个组合决定了列数随容器宽度自动变化，且每列宽度均等——不是靠媒体查询硬切，也不是靠 JS 算列数。
-
minmax(280px, 1fr)表示：每列至少 280px 宽，剩余空间平均分配（1fr） -
auto-fit会让空的网格轨道自动收缩，比auto-fill更适合内容不定长的卡片列表 - 如果容器宽度不足
280px × 2，就自动退为单列；够宽就自然铺开，无需改 CSS - 别写死列数如
repeat(3, 1fr)，那在小屏上会强制三列，导致卡片过窄或横向滚动
等高不是“额外功能”，而是 Grid 的默认行为
CSS Grid 天然让同一行中的所有卡片等高，前提是别手动干扰高度计算。
- 确保卡片本身没设
height、min-height或max-height - 如果卡片内部用了
flex布局（比如标题+内容+底部按钮），记得给卡片加min-height: 0，否则flex: 1会失效 -
align-items: stretch是默认值，不用显式写，但写了也没坏处 - 图片要用
object-fit: cover配合固定宽高比，否则可能撑开某张卡片的高度
Bootstrap 卡片混用时容易踩的坑
Bootstrap 5 的 .card 默认是 display: block，跟 Grid 兼容性好，但要注意这些干扰项：
-
.card-group已被移除，且它内部的flex: 1在 Grid 容器里不生效 - 别给卡片加
h-100类——Grid 不靠继承高度，加了反而可能冲突 - 如果卡片外层套了
.row，得把它改成display: grid，否则.row还是 Flex 布局，会破坏 Grid 行高对齐 -
.card-img-top没设高度时是安全的；但如果你手动加了height: 120px，就得同步删掉，否则破坏等高
真正卡住的往往不是写法本身，而是卡片内部某个 min-height 或图片没约束，悄悄破坏了 Grid 的自动拉伸逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
