grid-column: 1 / 4 表示从第1条线到第4条线，跨3列；grid-row: 2 / -1 表示从第2行线到最后一行线；span语法需明确起点，否则受自动定位影响，推荐显式指定起始线或使用命名区域。
grid-column 和 grid-row 怎么写才能跨多格
直接写 grid-column: 1 / 4 表示从第 1 条线开始，到第 4 条线结束，跨越 3 列（不是 4 格）。同理 grid-row: 2 / -1 表示从第 2 行线开始，到最后一行线结束——注意负索引在 grid 中是合法的，且指向隐式网格线。
常见错误是写成 grid-column: 1 / 3 却以为占了 3 格，其实只占 2 格；或者用 span 3 却忘了它默认从当前自动定位的位置起算，不是从第 1 格起。
-
grid-column: span 2：从元素本该落下的列起，向右跨 2 格（等价于auto / span 2） -
grid-column: 2 / span 3：从第 2 条线开始，向右跨 3 格（终点线 = 2 + 3 = 第 5 条线） -
grid-row: -2 / -1：跨最后一行与倒数第二行之间的区域，即最底一行（前提是显式定义了足够多的行） - 不写起始线时（如
grid-column: / span 2），浏览器按自动定位规则决定起点，结果可能不可控，慎用
grid-column-start / grid-row-end 这类拆分属性还值得用吗
绝大多数场景下不用。现代写法优先用简写 grid-column 和 grid-row，语义清晰、不易出错。只有两种情况例外：
- 需要单独动画某条边界线（比如只动
grid-column-end），但 css Grid 的线本身不能被单独动画，所以实际极少真用 - 用 CSS 自定义属性做动态控制时，拆开写更灵活，例如：
:root { --col-start: 2; --col-span: 3; } .item { grid-column: var(--col-start) / span var(--col-span); }
注意：grid-column-start 单独设值不会触发跨格，必须配对设置 grid-column-end 或用 span，否则行为等同于 auto。
立即学习“前端免费学习笔记（深入）”；
用 span 跨格时，为什么有时跨不到预期位置
根本原因是 span 的“起点”由自动定位算法决定，而该算法受 grid-auto-flow、已放置项、显式轨道定义共同影响。比如：
- 在
grid-auto-flow: row（默认）下，新项会填入首行最左空位，span 3从此处起算 - 若前一行已有满格项，新项可能被挤到第二行，此时
span 3就从第二行起跨，而非你脑中预设的“第一行第三格” - 显式定义列数少于 span 数（如
grid-template-columns: 1fr 1fr，共 2 列），却写span 3，浏览器会自动扩展隐式网格，但布局可能溢出容器
解决办法始终是：显式控制起点。宁可写 grid-column: 2 / span 2，也不要依赖自动定位加 span 2。
grid-area 能替代 grid-column + grid-row 吗
能，而且更紧凑，尤其适合命名区域或固定位置的模块。例如：
.header { grid-area: header; } .sidebar { grid-area: sidebar; } main { grid-area: main; } .container { display: grid; grid-template-areas: "header header header" "sidebar main main" "footer footer footer"; }但要注意：grid-area 是简写，覆盖 grid-row-start、grid-column-start、grid-row-end、grid-column-end 四个属性。如果只想要跨列不跨行，用 grid-area: auto / 2 / auto / span 3 反而比 grid-column: 2 / span 3 更啰嗦。
真正省事的是命名区域方式；纯数值定位时，grid-column 和 grid-row 更直白，也更容易动态计算（比如 js 注入 style.gridRow = '2 / span ${n}'）。
跨格看着简单，实际卡点都在“起点不可见”——浏览器自动算的起始线看不见、摸不着，一不留神就和你脑内坐标系对不上。动手前先用 outline: 1px solid red 套住所有 grid item，再打开开发者工具的网格叠加层，亲眼确认每条线在哪。