应使用 auto-fit + minmax(280px, 1fr) 实现响应式列数，配合 grid-auto-rows: minmax(12rem, auto) 确保等高，卡片需设 display: flex; flex-direction: column; height: 100%，且容器必须有明确宽度上下文。
用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 替代媒体查询
直接写死 repeat(3, 1fr) 或靠 @media 切列数，小屏下要么留白、要么横向滚动。而 auto-fit + minmax(280px, 1fr) 让浏览器自动算出最多能放几列：每列至少 280px（保障图文可读），剩余空间均分；容器缩小时，轨道自动收缩消失，不残留窄列。auto-fill 则会保留空轨道，容易把卡片拉宽变形。
必须设 grid-auto-rows: minmax(12rem, auto) 才真等高
align-items: stretch 只对单行内卡片生效，第二行起各行高度仍独立。要让所有行视觉统一，得靠 grid-auto-rows ——它作用于所有隐式创建的行轨道。minmax(12rem, auto) 表示每行至少 12rem 高（防内容过少塌陷），内容多时自动撑开。别写 grid-template-rows: 1fr，它只影响显式定义的行，第二行就失效。
卡片内部必须用 display: flex; flex-direction: column; height: 100%
Grid 拉伸再准，卡在子元素上就白搭。常见错误包括：
-
.card上写了height: 300px或max-height，直接阻止拉伸 - 没设
height: 100%，导致内部flex无高度上下文 - 底部按钮用
position: absolute，脱离文档流，高度计算中断 - 图片没加
object-fit: cover或aspect-ratio，加载抖动破坏等高节奏
正确做法是：卡片设 display: flex; flex-direction: column; height: 100%，按钮用 margin-top: auto 推到底。
容器必须有宽度上下文，否则 Grid 不知道“可用空间”在哪
如果父容器宽度为 auto 且没设 max-width 或 width，Grid 就无法计算列宽，整个网格可能渲染成高度为 0 的区域——这时 stretch 和 1fr 全部失效。确保容器有明确约束，比如：
-
width: 100%（继承父级） -
max-width: 1200px; margin: 0 auto（居中+限宽） - 或嵌套在另一个 Grid/Flex 容器中，且该容器已具备宽度上下文
最容易被忽略的是：Grid 容器本身得能被测量。没有宽度，minmax(280px, 1fr) 中的 1fr 就没东西可分。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
