grid-row-start单独设置无效，因仅指定起点不定义终点，浏览器默认按span 1渲染；必须搭配grid-row-end或使用grid-row: 2 / 4等简写语法才能跨行。
grid-row-start 单独设置为什么没效果
只设 grid-row-start 不会跨行，它只是指定起点，不定义终点。浏览器默认仍按 span 1 渲染，视觉上毫无变化。
- 必须搭配
grid-row-end或用简写grid-row: 2 / 4（从第 2 行线到第 4 行线，跨 2 行） - 行线编号从 1 开始，
-1表示最后一根行线，比硬写数字更健壮 - 若容器未显式声明
grid-template-rows，浏览器生成隐式轨道，grid-row: 1 / -1可能撑不满容器高度 - 避免混用线号和
span：如grid-row: 2 / span 2在动态内容下易指向不存在的轨道
grid-template-areas 能否拼出 L 形或 T 形
不能。grid-template-areas 中同名区域必须构成完整矩形，L 形、T 形等非凸形状会被静默忽略或行为未定义。
- 每行区域名数量必须严格一致，少一个
"."或多一个空格都会导致整条声明失效 - 区域名大小写敏感、不可含连字符（
sidebar-1需加引号，但不推荐） - 真需要非矩形结构，放弃
grid-template-areas，改用grid-column和grid-row手动锚定每个子项 - 命名区域只对参与网格流的常规子项生效，对
position: absolute元素完全无效
clip-path 裁剪后点击区域还准吗
准。加在 grid 容器上的 clip-path 只裁视觉，不改布局逻辑——子项仍在原始网格线位置，hover 和点击区域照常响应。
- 常见错觉：鼠标移到“空白处”触发了子项 hover，其实是子项本就占据那块坐标，只是被裁掉了
- 若要每个子项本身是三角形/六边形，
clip-path必须单独加在每个子项上，不能只加容器 - 坐标必须用百分比（如
polygon(50% 0%, 100% 25%, ...)），否则缩放或换屏时错位 - 大量子项开启
clip-path会影响渲染性能，建议控制在 100 个以内，必要时加will-change: transform
响应式下 auto-fit 列与跨行冲突怎么办
当用 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)))) 时，行轨道数量不固定，grid-row: 1 / 3 可能指向不存在的第 3 行线，跨行失效。
立即学习“前端免费学习笔记（深入）”；
- 给容器加
grid-auto-rows: minmax(100px, auto)，为隐式行轨道设最小高度约束 - 更稳妥的做法：关键区域改用固定行定义，比如头/主/尾三段式结构，用
grid-template-rows: 80px 1fr 60px - 避免在 auto 模式中依赖负索引（如
grid-row: 2 / -1），因为末尾行线位置不确定 - 调试时打开 Chrome DevTools → Styles → 点击
display: grid右侧蓝色图标 → 勾选 “Show line numbers”，实时验证线号是否存在
grid-template-rows: 1fr，也比完全不写强得多——隐式轨道在内容变化、动画、响应式切换时极易漂移。 
