grid-column 和 grid-row 通过指定真实存在的网格线（如 1 / 3）来定位，非“合并几格”；线号必须显式声明轨道才有效，否则静默失效；span 表示相对跨度，不可与终点线号混用；grid-area 更可靠，线号从 1 开始且终点不包含。
grid-column 和 grid-row 的起始/结束线不是“合并几格”，而是指定真实存在的网格线
写 grid-column: 1 / 3 并不表示“合并前两列”，而是“从第 1 条列线开始，到第 3 条列线结束”。这两条线必须真实存在，否则该规则静默失效——浏览器不会报错，但元素会回退到默认位置（通常是第一格）。常见现象是：样式写了却没跨，或者跨得歪斜。根本原因往往是父容器没定义 grid-template-columns 或 grid-template-rows，导致只有隐式网格线，而隐式线数量取决于内容顺序和尺寸，不可控。
验证方法很简单：打开开发者工具 → Elements 面板 → 选中容器 → 勾选 Grid overlay。如果目标线号（比如第 4 条行线）没画出来，就说明它不存在。
安全做法是显式声明基础轨道，哪怕用占位值：grid-template-rows: repeat(3, minmax(80px, auto))grid-template-columns: [start] 1fr [mid] 1fr [end]
span 是相对跨度，线号是绝对定位，混用时要注意语法合法性
grid-column: 2 / span 2 合法，意思是“从第 2 条列线开始，向右跨 2 个轨道”；但 grid-column: span 2 / 4 无效，整条声明会被丢弃。这是 CSS Grid 的语法硬限制，不是浏览器兼容问题。
二者行为差异明显：
-
grid-column: 2 / 4强制卡位：不管前面有没有空、其他项怎么排，它一定在第 2～3 列之间 -
grid-column: span 2自动找位：从当前自动分配的位置（比如第 1 格）开始向右占 2 格；若被占，就往后挪再 span
所以拼图类布局推荐用线号（如 grid-row: 1 / 4），而流式卡片列表用 span 更省心。别在一个属性里混写 2 / span 2 和 3 / 5，维护时容易误判逻辑。
grid-row 跨行后高度塌陷？大概率是 grid-template-rows 没设或设得太小
写了 grid-row: 1 / 4 却只看到一行高，不是属性没生效，而是网格轨道本身没预留空间。没设 grid-template-rows 时，浏览器按内容生成“自动行”，每行高度由子项撑开，跨行只是视觉拉伸，底层仍按单行渲染逻辑走。
解决方式只有两个：
- 显式定义行轨道：
grid-template-rows: 100px 100px 100px或repeat(3, 100px) - 用
minmax()保底：grid-template-rows: repeat(3, minmax(60px, auto))，既防塌陷，又允许内容撑高
如果用了 grid-auto-rows 替代 grid-template-rows，注意它只影响隐式行（自动换行新增的行），对 grid-row: 1 / 4 这种显式跨行无效。
用 grid-area 一次性写四边，比分开写 grid-column 和 grid-row 更可靠
当同时控制行列起止时，分开写容易漏掉某一项。比如只写了 grid-column: 1 / 3 却忘了 grid-row，那元素就会按默认流落到第 1 行第 1 列，而不是你想要的“左上角两列×三行”区域。
grid-area 把四边压缩成一个声明，不易出错：
grid-area: 1 / 1 / 4 / 3 等价于：grid-row: 1 / 4grid-column: 1 / 3
它还支持命名区域（如 grid-area: header），但前提是容器已用 grid-template-areas 定义过该名称。响应式场景下，用命名线（[sidebar-start]）配合 grid-area，比硬写数字线号更健壮。
最常被忽略的一点：网格线编号从 1 开始，且终点线不包含在内。写 grid-column: 1 / 2 只占 1 列，1 / 3 才占 2 列——这个“差一”关系一旦记反，整个拼图就错位了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
