必须用auto-fit，别碰auto-fill；auto-fit收缩空轨道让卡片均分空间，auto-fill强行保留空轨道致小屏下文字换行、图标热区缩水。
grid-template-columns 用 auto-fit 还是 auto-fill？
必须用 auto-fit，别碰 auto-fill。auto-fit 会收缩空轨道，让剩余卡片均分可用空间；auto-fill 则强行保留所有可能轨道，导致小屏下卡片被拉宽——文字换行、图标热区缩水、按钮压扁。
常见错误现象：minmax(150px, 1fr) 在 iPhone 竖屏（390px 宽）下生成三列，但每列实际只有 ~120px，卡片内容全挤成两行，高度失控。
实测安全底线是 280px：
- 小于
200px→ 行高崩、图标难点击 - 大于
350px→ iPad 竖屏（768px）只剩两列，空间浪费
推荐写法：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
多行卡片怎么真正等高？别只靠 align-items: stretch
align-items: stretch 默认生效，但它只保证「单行内」卡片等高，不同行之间高度仍不一致。第一行高 240px，第二行可能只有 160px。
真正起作用的是：grid-auto-rows: minmax(12rem, auto)
- 它作用于所有隐式创建的行轨道（即自动新增的那些行）
-
12rem是兜底最小高度，防塌陷；auto允许内容超长时自然撑开 - 别写
grid-auto-rows: 1fr—— 没有明确容器高度时，它会退化为内容最小高度，完全失效
注意：这个声明必须加在 Grid 容器上，不是卡片上。
卡片内部结构为什么拉伸失败？
外部 Grid 再准，卡在子元素上就白搭。以下几点必须同时满足：
-
.card必须设display: flex; flex-direction: column; height: 100% -
.card上不能有height、max-height或未处理的min-height；如有最小高度需求，改用min-height: 0 - 主体内容区（如
.card-content）用flex: 1占满剩余空间 - 底部操作区（如
.card-footer）用margin-top: auto推到底，别用position: absolute - 图片必须加
object-fit: cover或aspect-ratio，否则加载抖动会破坏等高节奏
最容易被忽略的是：min-height: 0 要加在 .card 上，不是它的子元素——否则 flex: 1 因父容器“不可压缩”而失效。
gap 和 grid-template-areas 容易静默失效
gap 必须用 px 或 rem，别用 %。小屏下百分比 gap 会缩到看不见，甚至归零，导致卡片紧贴。
grid-template-areas 静默失效很隐蔽，检查三件事：
-
grid-template-columns定义了几列（比如240px 1fr就是 2 列） - 每行引号里的区域名数量必须严格等于列数（不能多、不能少、不能留空格）
- 空位必须用
.占位，例如"header header" ". main"，不能写成"header header" "main" - 区域名大小写和连字符必须完全一致：
userStats✅，user-stats❌，1stats❌
复杂点在于：这些规则出错时浏览器不报错，整条 grid-template-areas 声明会被直接忽略，布局退回到默认流式排列。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
