grid-template-areas命名须全小写、连续、仅含字母数字下划线且开头非数字；repeat()中auto-fit压缩空轨道，auto-fill保留空轨道；grid-column span指跨线数非格数；:has()实现响应式列数目前仅Chromium 119+支持。
grid-template-areas 命名必须全小写且连续，不能含空格或特殊字符
用 grid-template-areas 定义模块区域时，名字不是随便起的变量，而是 CSS 语法级标识符。浏览器会直接按字面匹配，一旦命名不规范，整个布局就失效，但控制台通常不报错，只默默回退到默认流式布局——这是最隐蔽的坑。
常见错误现象：grid-template-areas 值里写了 "header nav main footer" 看似正常，但如果某处不小心加了中文空格、全角破折号，或者用了 user-profile（含短横线）——这些都会导致整行声明被忽略。
- 命名只允许字母、数字、下划线，且必须以字母或下划线开头
- 每个区域名在单引号/双引号内必须严格对齐成矩形（换行也得对齐），否则解析失败
- 推荐统一用小驼峰，比如
heroSection、asideNav，避免和 HTML 标签名冲突
repeat() 配合 minmax() 控制列宽时，auto-fit 和 auto-fill 行为差异极大
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 是响应式网格常用写法，但把 auto-fit 换成 auto-fill，视觉效果可能完全相反——尤其在容器宽度刚好卡在临界点时。
使用场景：卡片列表、仪表盘模块堆叠。两者区别不在“填满”还是“适配”，而在于“是否渲染空轨道”：
立即学习“前端免费学习笔记（深入）”；
-
auto-fit：压缩所有空列（轨道），让剩余列均分剩余空间 -
auto-fill：保留所有生成的列轨道，哪怕内容为空，会导致右侧留白甚至横向滚动 - 移动端调试时，
auto-fit更安全；需要预留“占位槽位”的编辑态界面，才考虑auto-fill
grid-column / grid-row 的 span 语法容易误读为“跨多少格”，实际是“跨多少条线”
写 grid-column: span 2，新手常以为是“占两列宽”，但 Grid 的坐标系基于**线（line）**，不是格（cell）。如果列定义是 1fr 1fr 1fr，共 4 条线（0–1–2–3–4），那么 span 2 是从当前线往右跳过 2 条线，即跨越 2 个轨道，等价于 2 / 4。
容易踩的坑：
- 在隐式网格中（比如没定义
grid-template-rows），grid-row: span 3可能意外拉高整个容器高度，因为每行高度按内容撑开，不是固定值 - 与
grid-area混用时，span不支持命名区域，只能用于线序号或数值 - 想精确控制跨列数？直接写
grid-column: 2 / 4比span 2更可预测
用 :has() 检测子元素类型来切换网格结构，目前仅 Chromium 119+ 支持
想让一个 .grid-container 在只有 1 个子项时变单列，有 2–3 个时变双列，4 个以上变三列？纯 CSS 实现曾不可行，现在可以用 :has() + grid-template-columns 组合，但兼容性是硬门槛。
实操建议：
- 写法示例：
.grid-container:has(> :nth-child(4)) { grid-template-columns: repeat(3, 1fr); } - Firefox 和 Safari 当前（2024 中）仍不支持
:has()在选择器左端，该规则会被整条忽略 - 不要依赖它做核心布局，仅作为渐进增强：先写默认三列，再用
:has()往回“收缩”
命名的本质是让团队协作时能快速对应视觉区块和代码位置，而不是追求语义完美。真正难的是保持命名和 DOM 结构、设计稿分区的一致性——改一张 Figma 页面，可能就得同步扫一遍所有 grid-area 值。
