grid-row和grid-column必须配合显式定义的网格线使用，起止线号须对应从1开始的显式轨道编号；越界、隐式轨道或缺失显式行定义会导致跨行跨列静默失效。
直接说结论：grid-row 和 grid-column 必须配合显式定义的网格线使用，否则跨行跨列可能静默失效；真正卡住人的不是语法写错，而是线号根本不存在、或被隐式轨道干扰。
grid-row / grid-column 的起止线编号必须对得上显式轨道
网格线从 1 开始编号：容器左边缘是第 1 条列线，上边缘是第 1 条行线。写 grid-column: 2 / 4 表示从第 2 条竖线开始、到第 4 条竖线结束（占第 2、3 两列），不是“跨越 4 列”。
- 显式定义了
grid-template-columns: 1fr 2fr 1fr→ 共有 4 条竖线（1–4），grid-column: 1 / 5就会越界，浏览器可能忽略或创建隐式列 -
grid-column: 1 / -1是合法的，表示从最左到最右（含所有显式列） - 负值倒数：
grid-column: -3 / -1在 3 列布局中等价于1 / 3 -
gap不产生新线，但会撑开线间距——线号不变，视觉上容易误判对齐位置
span 写法依赖自动放置起点，不等于“固定占几格”
grid-column: span 2 不是“强制占两列”，它先找当前可用的起始列，再向右占 2 轨道。这个起点受 grid-auto-flow、已有元素顺序、甚至 order 影响。
- 前面有
grid-column: 1 / 3的元素，后续span 2可能从第 3 列开始，也可能跳到第 5 列（中间有空隙时） - 想强制从第 2 列开始再跨 2 列，必须写全：
grid-column: 2 / span 2 -
grid-row: span 3可能落在隐式行里，导致高度失控——建议同步设grid-auto-rows: minmax(60px, auto) -
grid-column: span 2 / 4是无效声明，整条规则会被浏览器丢弃（DevTools 中显示删除线）
用 grid-area 一行写死四条线更可靠
当布局模块稳定（比如六宫格中的主视觉区、侧边功能块），grid-area 比分开写 grid-row + grid-column 更紧凑、不易漏项。
立即学习“前端免费学习笔记（深入）”；
-
grid-area: 2 / 1 / 4 / 3等价于grid-row: 2 / 4+grid-column: 1 / 3 - 支持
span：grid-area: 1 / 2 / span 2 / span 3表示从第 1 行第 2 列开始，跨 2 行 3 列 - 只给两个值（如
grid-area: 1 / 2）会让缺失的row-end和column-end按规则补为auto，不如显式写全可控 -
grid-area是简写，会覆盖grid-row-start等独立属性，调试时别被 DevTools 里灰掉的属性骗了
响应式下线号动态重排，不能硬写固定数字
线号不是静态编号，它随 grid-template-columns 动态变化。桌面端 repeat(4, 1fr) 有 5 条竖线（1–5），移动端改成 repeat(2, 1fr) 就只剩 3 条（1–3）。
- 硬写
grid-column: 1 / 4在移动端会越界失效 - 优先用负值（如
1 / -1）或命名线（grid-template-areas配合grid-area）提升鲁棒性 - 如果必须用数字线号，媒体查询里要同步调整
grid-column值，而不是只改grid-template-columns
最容易被忽略的是：跨行跨列行为在没有显式 grid-template-rows 时完全不可控——浏览器会按内容撑开隐式行，而你写的 grid-row: 2 / 4 可能落在一堆高度为 0 的空白行里。
