商品卡片高度不一致是因为 align-items: stretch 被干扰：子项设 height/max-height/align-self、父容器无高度约束、或子项内 img 的 min-height: auto 均会阻止拉伸生效；需配 grid-template-rows: 1fr 或 grid-auto-rows: minmax(0, 1fr) 并确保父容器有明确高度，同时删除子项干扰样式、改用 gap 和 padding 控制间距。
为什么商品卡片高度不一致，align-items: stretch 没起作用？
不是 Grid 失效，而是你无意中关闭了它的默认拉伸行为。Grid 容器默认 align-items: stretch，但这个行为极易被干扰：子项写了 height、max-height、align-self: start，或者父容器没高度约束（如 height: auto 且内容很短），都会让拉伸“不可见”。更隐蔽的是，子项内部的 <img> 默认 min-height: auto，也会阻止外层拉伸生效。
两列/三列商品列表真正等高的最小配置
只写 grid-template-columns: repeat(3, 1fr) 不够——它只管列宽，不管行高。要让所有卡片视觉等高，必须确保它们落在同一行轨道，并有可分配的空间：
-
grid-template-rows: 1fr：最简方案，强制该行占满父容器剩余高度 -
grid-auto-rows: minmax(0, 1fr)：更稳妥，兼容 Safari ≤15.4 对隐式行中1fr的 bug - 父容器必须有明确高度参照，比如
min-height: 300px、height: 100vh，或嵌套在另一个有尺寸约束的 flex/grid 容器里 - 删掉所有子项上的
height、max-height、align-self
响应式下从 3 列变 1 列，等高还成立吗？
不成立。媒体查询里把 grid-template-columns 改成 1fr 后，商品项变成上下排列、分属不同行轨道。align-items: stretch 只作用于各自所在行，不再有横向比较基础。此时每张卡片高度由自身内容决定，彼此无关。如果需要断点后仍保持等高，得用 JavaScript 手动同步高度，或改用 Flexbox + flex-wrap: wrap 配合 align-content: stretch（但后者仅在多行时有效）。
用 gap 替代 margin 控制间距
子项上写 margin-bottom 是常见坑：它会撑开行高、干扰 stretch 计算，甚至被父容器 overflow: hidden 截断，造成“看起来不等高”的假象。
- 统一用容器级
gap: 20px控制行列间距，干净且不影响拉伸 - 子项内部若需留白，用
padding，不是margin - 避免在子项上设
display: table-cell或position: absolute，它们脱离文档流，不参与 stretch 计算
实际中最容易被忽略的，是父容器缺乏高度约束和子项内图片的 min-height 干扰——这两点不处理，其他设置全白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
