grid-column 和 grid-row 指定子元素起止网格线而非行列数，如 grid-column: 2 / 4 表示从第2条竖线到第4条竖线（占2列）；支持正负线号、span语法及 grid-area 简写，需注意显式线号存在性与响应式适配。
grid-column 和 grid-row 的基础写法
这两个属性用来指定子元素在网格中的起止位置，不是“占几行几列”，而是“从第几条线开始、到第几条线结束”。比如 grid-column: 2 / 4 表示从第 2 条竖向网格线开始，到第 4 条竖向网格线结束（即跨越第 2、3 两列）。
常见错误是写成 grid-column: 1 / 3 却以为占了 3 列——其实只占 2 列（列 1 和列 2），因为终点线不包含在内。
-
grid-column: start / end或grid-column: start / span n -
grid-row: start / end或grid-row: start / span n - 数值可以是正数（从左/上往右/下数）、负数（从右/下往左/上数），比如
grid-column: -3 / -1
跨行跨列时容易踩的坑
最常出问题的是线号错位：网格线编号从 1 开始，但很多人误以为从 0 开始；另外，显式定义的 grid-template-rows 或 grid-template-columns 会影响线号总数，而隐式生成的轨道（自动换行产生的）不会增加显式线号。
- 没定义
grid-template-rows时，grid-row: 1 / 3可能无效——因为只有 1 条显式横线（grid-row: 1是起点，但第 3 条线根本不存在） -
span后面跟数字时，它只按“轨道数”算，不看内容高度。比如grid-row: 2 / span 2就是占第 2、3 行轨道，哪怕第 3 行是auto高度 - 用负数线号时，
grid-column: -2 / -1是最后一列，但grid-column: -1 / -2会失效（起点不能大于终点）
和 grid-area 一起用更简洁
如果同时控制行列起止，直接用 grid-area 更清晰，语法是 grid-area: row-start / column-start / row-end / column-end。
立即学习“前端免费学习笔记（深入）”；
例如：grid-area: 2 / 3 / 4 / 5 等价于：grid-row: 2 / 4 + grid-column: 3 / 5。省去重复声明，也避免漏写某一项。
- 支持
span：如grid-area: 1 / 2 / span 2 / span 3 - 命名区域更直观：先在容器设
grid-template-areas: "a a b" "a a c"，子元素再写grid-area: "a" - 但注意：命名方式和线号方式不能混用在同一声明里
响应式或动态场景下的注意事项
用线号写死位置（如 grid-column: 1 / 4）在响应式布局中容易断裂——当列数随屏幕变化时，第 4 条线可能不存在，导致元素被挤到隐式网格里，甚至消失。
- 优先考虑
span写法（如grid-column: 1 / span 3），它更适应列数变化 - 媒体查询中重设
grid-column时，记得同步调整grid-row，否则可能重叠或错位 - JavaScript 动态修改时，直接改
style.gridRow或style.gridColumn即可，值为字符串，如"2 / span 2"
