auto-fit + minmax() 是唯一靠谱的列数控制方式，因 auto-fit 能收缩空轨道避免幽灵列，minmax(280px, 1fr) 保障最小宽度与弹性分配；grid-auto-rows: minmax(12rem, auto) 实现多行等高，配合卡片内 flex column 与 height: 100% 才真正生效。
直接用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) + grid-auto-rows: minmax(12rem, auto)，再配合卡片内部 display: flex; flex-direction: column; height: 100%，就能在现代浏览器中稳定实现视觉一致的等高卡片流。不依赖 JS，也不靠媒体查询硬切列数。
为什么 auto-fit + minmax() 是唯一靠谱的列数控制方式
写死 repeat(3, 1fr) 或用 auto-fill 都会出问题：前者在小屏强制三列，导致卡片过窄甚至横向滚动；后者保留空轨道，内容少时卡片被拉宽变形。
-
minmax(280px, 1fr)表示每列至少 280px（保障文字可读、图片不挤），剩余空间均分 -
auto-fit会让空的网格轨道自动收缩，容器宽度刚够放两列，就绝不会出现第三列的“幽灵轨道” - 这个组合让列数随容器宽度自然增减，不是靠 JS 算，也不是靠媒体查询切——真正响应式的核心就在这儿
grid-auto-rows: minmax(12rem, auto) 才管多行等高
align-items: stretch 只负责单行内拉伸，对不同行之间的高度差异毫无作用。如果你看到第一行高、第二行矮，说明只靠 stretch 不够。
-
grid-auto-rows作用于所有隐式创建的行轨道（即超出你显式定义的那些行），而grid-template-rows只影响你手写的那几行 -
minmax(12rem, auto)意味着每行至少 12rem 高（防塌陷），内容多就自动撑开，不卡死也不截断 - 别写
grid-auto-rows: 1fr—— 如果容器没有明确高度上下文（比如没设min-height或没被父级约束），1fr会退化成min-content，看起来和没写一样
卡片内部结构必须“配合”，否则 Grid 拉伸全白费
Grid 容器再准，子元素一个 height: 300px 或 min-height: 200px 就能打断整个拉伸链。最容易被忽略的是卡片自身和内部 flex 布局的配合。
- 删掉卡片上所有
height、max-height、min-height；如需最小高度兜底，改用min-height: 0 - 卡片必须设
display: flex; flex-direction: column; height: 100%，否则内部无法占满 Grid 轨道 - 底部按钮用
margin-top: auto推到底，别用position: absolute—— 后者脱离文档流，高度计算直接中断 - 图片加
object-fit: cover或aspect-ratio，否则加载抖动或比例失真会瞬间破坏等高节奏
容易被忽略的“高度上下文”陷阱
如果 Grid 容器本身渲染出来的高度是 0（比如父级没给宽高、也没内容撑开），那 stretch 和 1fr 都没东西可拉。这不是 bug，是 Grid 的正常行为：它需要一个可计算的高度空间才能分配。
- 要么让容器由内容自然撑开（最常见）
- 要么显式设
min-height: 400px或height: 100vh等有明确值的约束 - 特别注意嵌套场景：如果 Grid 容器在 Flex 容器里，Flex 的
align-items不会影响 Grid 子项，但 Flex 父级若没高度，Grid 就拿不到可用空间
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
