grid-column 和 grid-row 的基础写法是用线号（如 1 / 3）或 span（如 span 2），线号从 1 开始，负值从末尾倒数；必须依赖显式轨道定义或自动网格生成的线，不可混用 span 与 / 语法。
grid-column 和 grid-row 的基础写法是什么
这两个属性就是控制网格项在 Grid 布局中“占几格”的直接手段，不是修饰、不是辅助，是定位本身。它们的值不是像素或百分比，而是**线号（line number）**，从 1 开始数，横向是 column lines，纵向是 row lines。
常见错误现象：grid-column: 2; 看起来像“放在第 2 列”，其实它等价于 grid-column: 2 / 3;——只跨 1 格；想跨 2 列得写 grid-column: 2 / 4;。
-
grid-column: start / end：最推荐写法，明确起止线号（如grid-column: 1 / -1;表示从左边界到右边界） -
grid-column: span N：相对当前自动位置跨 N 条线（grid-column: span 2;比grid-column: 1 / 3;更灵活，尤其配合grid-auto-flow） - 负值线号从容器末尾倒数（
grid-row: -2 / -1;是倒数第二行到最后一行）
为什么 grid-row: 2 / 4 有时不生效
根本原因：没有显式定义行轨道（grid-template-rows），浏览器按内容自动分配高度，导致“第 4 条线”可能根本不存在。Grid 的线号不是凭空生成的，它依赖于你声明的轨道数量或隐式网格的扩展规则。
使用场景：当你用 grid-template-rows: 100px 200px;，就只有 3 条横线（1→2→3→4）；但若只写 grid-auto-rows: 1fr;，浏览器会动态生成线，此时 grid-row: 2 / 4; 才可能安全落地。
立即学习“前端免费学习笔记（深入）”；
- 检查开发者工具里 Elements 面板的 Grid overlay，看目标线号是否真实存在
- 避免依赖未声明的线号，比如
grid-row: 1 / 5;在只有 2 行内容时大概率失效 - 用
grid-row: 1 / -1;比硬写大数字更可靠，尤其用于全宽/全高覆盖
span 和 / 语法混用容易踩什么坑
span 是相对定位，/ 是绝对线号，两者语义冲突。CSS 不允许把它们混在同一个属性值里，比如 grid-column: 2 / span 3; 是无效声明，会被整个丢弃（DevTools 里显示为 strike-through）。
性能影响：用 span 会让浏览器多做一次位置推导，尤其在嵌套 Grid 或大量项目时，比固定线号略慢，但通常可忽略；真正影响体验的是逻辑错乱带来的重排。
- 要跨列且起点不确定 → 用
grid-column: span 2; - 要精确对齐某条已知线（比如和标题对齐）→ 用
grid-column: 3 / 5; - 想让某元素从第 2 列开始、占满剩余列 →
grid-column: 2 / -1;，别写span
响应式下 grid-column 怎么保持跨列一致
线号会随 grid-template-columns 改变而重排，比如桌面端 grid-template-columns: repeat(4, 1fr); 有 5 条竖线，移动端改成 repeat(2, 1fr); 就只剩 3 条——原来 grid-column: 2 / 5; 直接越界失效。
兼容性影响：所有现代浏览器都支持 span 和负线号，但 IE 完全不支持 Grid，所以如果还要兼容 IE，这套方案本身就不成立，得换 Flex 或 float。
- 优先用
span+grid-column-start组合，比如grid-column-start: 2; grid-column-end: span 2; - 媒体查询里同步调整线号，比如移动端改用
grid-column: 1 / -1;全宽 - 避免在不同断点间复用同一组线号，除非你严格控制了每种布局下的轨道数量
线号不是坐标，是轨道之间的“缝”。缝的数量取决于你画了几条轨道，而不是内容塞了多少个元素。这点最容易被忽略，一上来就数内容列数，结果发现线号对不上。
