grid-template-areas只能写在父容器上，子元素设置无效；必须确保区域名出现次数与对应grid-area元素数量一致，空单元格用.表示，跨区需命名线保障响应式健壮性。
grid-template-areas 用错位置就全乱套
别急着写 grid-template-areas，它只在容器上生效，子元素加了没用。常见错误是把模板字符串写在 item 上，结果布局完全没反应——因为浏览器根本不会解析。
真正该写的地方是父容器的 display: grid 元素，且必须保证每个区域名在模板里出现次数和对应子元素数量一致。比如写了 "header header sidebar"，就得有且仅有两个元素带 grid-area: header，一个带 grid-area: sidebar。
- 模板字符串中空格分隔列，换行分隔行，不能用逗号或分号
- 同一区域名可跨多格，但所有同名格必须连通（L形、T形都不行，只能是矩形）
- 用点
.表示空单元格，但别写成空格或null，否则解析失败
fr 单位在报刊多栏中容易撑爆容器
fr 看似方便，但在标题+正文+侧栏混排时，常因内容高度差异导致某一行被拉得极长，尤其当侧栏含长列表或图片时。这不是 bug，是 fr 的设计逻辑：按剩余空间比例分配，而非按内容自然高度。
报刊排版更需要“内容驱动高度”，推荐组合用法：grid-auto-rows: min-content 控制默认行高，对标题行显式设 minmax(60px, auto)，正文区域用 1fr 但加 max-height 防溢出。
立即学习“前端免费学习笔记（深入）”；
- 避免整行都用
1fr 1fr 1fr，尤其当其中一栏是导航或广告图——改用固定值如250px或minmax(250px, max-content) - 用
grid-auto-flow: dense前务必测试，它会打乱 DOM 顺序填空，SEO 和可访问性可能受损 - 打印样式表里
fr不可靠，建议媒体查询中切换为px或em
grid-column / grid-row 跨行跨列写法不匹配就会断层
想让主标题横跨三栏，写 grid-column: 1 / -1 最稳；但若父容器列数动态变化（比如响应式从 4 列缩到 2 列），-1 就会失效——它锚定的是网格线编号，不是“最后一列”语义。
更健壮的写法是用命名线：grid-column: full-start / full-end，前提是定义了 grid-template-columns: [full-start] 1fr [main-start] 3fr [main-end] 1fr [full-end]。这样无论列数怎么变，只要命名线存在，跨区就始终准确。
-
span 2和2 / 4行为不同：前者基于起始线往后跨，后者是绝对线范围，中间插入新轨道时后者会偏移 - 跨行时慎用
grid-row: 1 / -1，表格类布局中页脚可能被吞掉，建议明确写grid-row: 1 / 5或用命名线 - Firefox 对
span的解析比 Chrome 更严格，测试时优先用具体线号
@supports (display: grid) 不足以保底老浏览器
写了 @supports (display: grid)，但 IE11 仍进来了——因为它的 display: -ms-grid 也满足语法检查，却完全不支持 grid-template-areas 或 fr 单位。光检测 display 不够，得叠加关键特性：
/* 正确保底 */ @supports (display: grid) and (grid-template-areas: "a b") and (grid-template-columns: 1fr)
不过更实际的做法是：用 float 或 inline-block 写基础流式布局，再用 @supports 叠加网格增强。别指望一套 CSS 通吃。
- Can I Use 数据显示，iOS Safari 10.3+ 才开始稳定支持
subgrid，当前报刊布局别提前用 - PostCSS 插件如
postcss-grid-kiss能转语法，但生成的 fallback 往往臃肿，手动控制更可控 - 服务端渲染时，别在 SSR 阶段就注入
@supports块，CSSOM 构建阶段才真正生效
复杂跨行跨列不是靠堆属性解决的，而是靠提前规划命名线、克制使用 fr、以及接受“某些老浏览器就是得降级”。写完记得用真实内容测——空 div 永远不会暴露 minmax() 的边界问题。
