grid-column跨列必须依赖显式定义的网格线，父容器未设grid-template-columns则仅存在1、2两条线，grid-column:1/4会静默失效；显式声明如grid-template-columns:1fr 1fr 1fr生成1–4号线，grid-column:2/4为绝对定位，grid-column:2/span2为相对跨度，二者不可混用。
grid-column 跨列必须依赖显式定义的网格线，否则写什么都无效。
父容器没设 grid-template-columns 就别想跨列
浏览器不会自动为你生成足够多的垂直线。比如只写 display: grid，它默认只建 1 列 → 只有 1 和 2 两条线，grid-column: 1 / 4 直接静默失败。
- 必须先用
grid-template-columns显式声明列结构，例如：grid-template-columns: 1fr 1fr 1fr→ 生成 4 条线（编号 1–4） - 更通用的写法是：
grid-template-columns: repeat(6, 1fr)→ 生成 7 条线（1–7），适合后续灵活跨列 - 打开 Chrome DevTools → Elements 面板 → 选中容器 → 勾选 “Show line numbers” 和 “Overlay grid”，一眼就能看到线有没有画出来
grid-column: 2 / 4 和 grid-column: 2 / span 2 完全不是一回事
前者是绝对定位，后者是相对跨度，混用容易错位。
-
grid-column: 2 / 4：硬卡在第 2 条线和第 4 条线之间，不管前面有没有其他项占位 -
grid-column: 2 / span 2：从第 2 条线开始，向右占满 2 个轨道（终点自动算为第 4 条线） -
grid-column: span 2：不指定起点，Grid 自动找第一个空闲位置再跨 2 列，适合动态内容 - 负值更安全：
grid-column: 2 / -1表示“从第 2 条线到容器最右边那条线”，不用数总列数
同时跨行跨列时，优先用 grid-area
分开写 grid-column 和 grid-row 容易漏掉某一项，导致元素回退到默认位置。
-
grid-area: 1 / 2 / 3 / 5→ 行起 / 列起 / 行止 / 列止（四值顺序固定） - 如果已用
grid-template-areas命名了区域，直接写grid-area: header更直观 - 注意：
grid-area是简写，它会覆盖单独设置的grid-row-start、grid-column-end等属性
最容易被忽略的是：跨列行为只作用于 Grid 项目（子元素），且所有线号都基于父容器实际生成的网格线——不是“列数”，而是“线编号”。写大数字前，先看 overlay 里有没有那条线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
