css grid 网格线编号从1开始，line 1为容器左/上边界，0无效且被转为auto；n条线定义n−1个轨道，1/-1可撑满整行列，隐式网格中该规则依然成立。
grid-column: 1 / 2 这种写法能正常工作，而 grid-column: 0 / 1 会失效——不是浏览器报错，是根本没效果。CSS Grid 的网格线编号从 1 开始，这是规范强制定义的坐标系起点，不是历史遗留或设计疏忽，而是为了匹配人眼对“边界”的直觉计数方式。
网格线编号从1开始，是因为它描述的是「容器边界」而非「格子索引」
你写的 grid-template-columns: 100px 200px 实际生成了 3 条垂直列线：line 1（左边缘）、line 2（100px 后）、line 3（再 200px 后，即右边缘）。这三条线围出两列轨道，但线本身是“分隔器”，不是“容器内位置”。所以：
- 第 1 根线永远是容器最左/最上边界，不可跳过或省略
- 不存在
line 0：它没有几何意义——左边界左边是什么？没定义，也不需要 - 负值如
-1指向最后一根线（即最右/最下边界），和正向编号形成对称，1 / -1就是“撑满整行/整列”
写成 grid-column: 0 / 1 会发生什么？
浏览器不会报错，但会静默处理为 auto ——也就是让元素回到默认流位置，通常表现为“消失”或“叠在第一个格子里”。这不是 bug，是规范明确要求的行为：grid-column-start 值若小于 1，必须被计算为 auto。
- 常见错误场景：从数组索引思维切换过来，误把
line 1当作“第 0 列起始”，于是填0 - 调试技巧：用开发者工具检查 computed 样式，看
grid-column-start是否已变成auto - 注意：即使父容器用了
grid-template-areas，线号逻辑不变——命名区域只是语法糖，底层仍映射到 1-based 线号
为什么不用 0-based 编号？对比 Flexbox 和 JS 数组的混淆点
Flexbox 的 order、JS 的 Array.prototype.indexOf() 都是 0-based，容易迁移到 Grid 上犯错。但 Grid 的设计目标不同：
- Flex 是一维顺序流，索引对应“第几个孩子”；Grid 是二维空间划分，线号对应“第几道墙”
- 数学上，n 条线定义 n−1 个轨道；用 1-based 编号，
1 / n就天然表示“跨全部 n−1 个轨道”，无需加减运算 - CSS 中其他类似坐标系统（如
clip-path: polygon(0 0, 100% 0, ...)）也用百分比或绝对值，不依赖 0-based 索引
grid-template-columns: 1fr（显式定义 2 条列线），但某个子项写了 grid-column: 1 / 4，浏览器会自动创建隐式列轨道来满足终点线 4——此时实际生成了 4 条线（1→2→3→4），但只有第 1–2 条之间是显式轨道，其余是隐式扩展。这种自动补线行为，会让 1-based 编号在动态内容中更稳定、更可预测。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
