grid-template-areas 只能拼矩形，非矩形区域（L形、T形、凹形）必须用 grid-column 和 grid-row 手动定位；它要求每行区域名数量严格一致，同名区域必须构成连续闭合矩形，否则声明被浏览器静默丢弃。
直接说结论：grid-template-areas 只能拼矩形，非矩形区域（L形、T形、凹形）必须用 grid-column 和 grid-row 手动定位。
为什么 grid-template-areas 会失效？
它要求每行区域名数量严格一致，且同名区域必须构成连续闭合矩形——这是规范硬性限制，不是浏览器兼容问题。
- 写了
"a a b""a c b"想让a呈 L 形？结果a只渲染在第一行，第二行被忽略或静默失败 - 某行少写一个
.占位符，整条grid-template-areas声明会被浏览器直接丢弃，控制台可能无报错 - 区域名含连字符（如
main-area）或数字开头（如1sidebar），声明无效；合法名只能是字母开头、含下划线的组合，比如header或main_area
grid-column / grid-row 怎么精准跨格？
用线号（line number）而非区域名，是最稳的定位方式，尤其适合六宫格这类需错位拉伸的布局。
- 列轨道定义为
40% 23% 4% 23%，就生成 5 条垂直线（编号 1–5）；行轨道300px 50px 200px生成 4 条水平线（编号 1–4） -
grid-column: 1 / 3表示从第 1 条线到第 3 条线，横跨前两列；grid-row: 1 / -1表示从顶线到底线，撑满全部三行 - 负值可用：
grid-column: -2 / -1锚定最右一列，适合右侧动态宽度场景；但注意gap不产生线号，别误把间隙当轨道边界 - 调试时打开 Chrome DevTools → Styles 面板 → 点击
display: grid右侧蓝色图标 → 勾选 “Show line numbers”，肉眼验证线号位置比猜名字靠谱得多
clip-path 能不能让网格“看起来不规则”？
能，但必须分清作用对象：加在容器上只裁视觉，加在子项上才改形状。
- 给 grid 容器加
clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%)，子项仍按原始矩形网格线排布，只是边缘被切掉——hover 和点击区域照常响应 - 要做六边形拼贴？每个子项单独加
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)，再配合transform: translateX(50%)错行，Grid 只搭骨架 - 坐标必须用百分比，否则换屏或缩放就错位；若容器有
padding或border，polygon()坐标需手动偏移，否则内容可能被裁掉一半
真正卡住人的地方不在语法，而在思维惯性：总想先画个“区域名草图”，结果发现 L 形根本拼不出来。不如直接数线号、设跨度、逐个钉位置——越绕开 grid-template-areas 的抽象层，越容易落地。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
