先记住这个答案
给网格容器定义行和列后，项目用 grid-row 选择纵向范围，用 grid-column 选择横向范围，两者一起就确定了一个矩形区域。数值指网格线，不是“第几个格子”：三列有四条列线，grid-column: 1 / 3 会跨前两列。没有显式定位的项目仍按自动放置规则找空位；显式位置冲突时，项目甚至可能重叠。
- 行列位置由网格线而非单元格编号指定
grid-row控制纵向占位grid-column控制横向占位span 2表示跨两条轨道
用网格线框出主内容
假设布局有三列两行，左边导航占两行，正文占右边两列。先定义轨道，再给项目写起止线，比用固定像素偏移更稳。
.layout { display: grid; grid-template-columns: 180px 1fr 1fr; grid-template-rows: auto auto; }
.nav { grid-row: 1 / 3; grid-column: 1 / 2; }
.main { grid-row: 1 / 3; grid-column: 2 / 4; }.nav 从第一条行线到第三条，覆盖两行；.main 从第二条列线到第四条，覆盖右侧两列。页面有三列，却存在第四条列线，因为线位于轨道边界。
也可以写 grid-column: 2 / span 2，表示从第二条列线起跨两列。前者明确结束线，后者明确跨度；当轨道数量变化时，选哪个要看布局意图。
显式项目与自动放置共存
只给重点卡片指定两轴位置，其余项目可以继续自动排列。浏览器会为自动项目寻找可用区域，而不会把所有项目都强制塞进第一行。若显式指定的两个项目落在同一区域，Grid 不会替你报错或移动其中一个，它们可能相互覆盖。
开发时打开浏览器的 Grid 线条叠加层，核对线号和轨道数量。响应式断点改列数后，原先写死的结束线可能创建意外的隐式轨道；这时应同步调整定位规则，或使用命名区域提高可读性。
线号还会受响应式轨道变化影响。例如桌面有三列时，正文写 grid-column: 2 / 4 恰好到最右边；手机只剩一列后，这条规则仍然要求第四条列线，浏览器可能补出隐式列，导致横向溢出。切换轨道数时，同时把定位改为 1 / -1 或单列对应范围，并在 Grid 调试工具里检查是否出现了隐式列。
容易答错的地方
- 把线号当成格子号
1 / 2只占第一条轨道，1 / 3才占两条。画出轨道两侧的线可以避免多算或少算。- 认为 Grid 会自动避开所有冲突
- 显式定位的项目可以占同一块区域，形成重叠；自动放置只负责那些没有完整位置的项目。
面试官还会怎么问？
grid-area 能代替两条属性吗？
可以用四个网格线值的简写，也可以配合命名区域使用；读写复杂布局时命名区域通常更直观。
没有定义 grid-template-rows 可以写 grid-row 吗？
可以。定位或内容可能创建隐式行，尺寸由 grid-auto-rows 或内容决定，但需要检查是否符合预期。
负线号有什么用？
负数从显式网格的末端往前数，-1 常表示最后一条显式网格线，适合让项目跨到边界。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。