最稳的多卡片排版方案是用grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))配合gap与外层grid-template-areas解耦侧边栏；auto-fit比auto-fill更优，因它收缩空轨道，避免小屏下卡片被压窄；280px为实测最小宽度，兼顾iphone se与ipad竖屏；侧边栏须独立于卡片网格，用外层grid-template-areas显式划分并锁定宽度；务必确保.main为display: grid且响应式中同步更新所有grid属性。
用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) + gap + 外层 grid-template-areas 解耦侧边栏，是目前最稳、改动最小的多卡片排版方案。硬写媒体查询列数反而漏尺寸、难维护。
为什么 auto-fit 比 auto-fill 更适合卡片主区域
小屏下 auto-fill 会保留空轨道，导致浏览器仍按“能放3列”去计算间隙和子项宽度，但实际塞不下，结果卡片被压窄、文字换行、图标点不中；auto-fit 收缩空轨道，把省下的空间分给可见列，更符合卡片“宁少勿挤”的交互底线。
-
minmax(280px, 1fr)中的280px是实测底线：含padding、border、14px 字号、44px 触控高后，文字仍单行、按钮可点 - 设成
200px→ iPhone SE（375px 宽）下 gap 占掉 32px，剩余 343px，2×200+16 = 416px > 343px，被迫退为 1 列，但卡片内行高失控 - 设成
350px→ iPad 竖屏（768px）下 (2×350)+16 = 716px ≤ 768px，刚好 2 列；但 (3×350)+32 = 1082px > 768px，无法上 3 列，横向空间浪费严重 - 别写
repeat(auto-fit, 300px)或repeat(auto-fill, 1fr)——minmax()不可省略，否则浏览器无法判断最小宽度
侧边栏必须脱离卡片网格，否则宽度会被动态挤压
把导航栏或筛选区塞进 repeat() 里，等于让它和卡片一起参与列宽重算——结果是菜单文字缩成“…”，折叠按钮热区消失，图标错位。
- 外层容器用
grid-template-areas: "header header" "nav main" "footer footer"显式划分 -
nav区域单独设grid-area: nav，并用grid-template-columns: 240px 1fr锁定宽度，不带minmax() - 主内容区
.main再嵌套一层display: grid，里面才写grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) - 检查 computed 样式，确保
.main的display确实是grid，不是被父级flex或inline覆盖
grid-template-areas 在小屏失效？先查这三处
写了 "header" "nav" "main" 却横着排，大概率不是语法错，而是 Grid 根本没启用。
- 每个媒体查询块里，必须同时声明
display: grid、grid-template-areas、grid-template-columns和grid-template-rows，缺一不可 - 检查 computed 样式里的
display值，不是看 rules 面板有没有写，而是确认最终生效值确实是grid -
grid-template-areas每行引号内的区域名数量，必须严格等于grid-template-columns定义的列数；空位必须用.占位，不能留空格或直接空着
真正容易被忽略的是：响应式切换时，很多人只改 grid-template-areas，却忘了同步更新 grid-template-columns 和 grid-template-rows —— 这会导致区域名和轨道映射失败，整个布局退化为普通流。这不是浏览器 bug，是 Grid 规则本身的硬约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
