grid-column: 1 / 4 表示网格项从第1条垂直线起始、至第4条垂直线结束，占据第1–3列轨道；要求父容器至少定义3列（即4条垂直线），否则声明失效。
grid-column: 1 / 4 是什么行为
它让一个网格项从第 1 条垂直网格线开始，跨越到第 4 条垂直网格线结束（不包含第 4 线本身），实际占据的是第 1、2、3 这三列的列轨道。
注意：grid-column: 1 / 4 和 grid-column: 1 / -1 不等价——后者是到最后一根线，而前者硬编码了终点，一旦容器列数少于 4（比如只有 3 列），这个声明会失效，元素可能被挤到默认位置甚至消失。
- 网格线编号从左到右为 1, 2, 3…，从右到左为 -1, -2, -3…
-
1 / 4要求容器至少定义了 3 列（即产生 4 条垂直线），否则无效 - 它不关心内容多少，只按线定位；哪怕目标区域里已有其他元素，也会强行覆盖（除非有
grid-auto-flow: dense干预）
为什么 grid-column: 1 / 4 有时没效果
最常见原因是父容器没定义列轨道，或列定义太短。
grid-column 只在明确划分了列轨道的容器上起作用。如果父元素只有 display: grid，但没设 grid-template-columns，浏览器会按 auto-fit/auto-fill 规则生成隐式列，此时显式线号（如 4）往往不存在。
- 父元素必须有明确的列划分，例如：
grid-template-columns: 1fr 1fr 1fr（生成 4 条线） - 若用
grid-template-columns: repeat(3, 1fr)，线号就是 1–4，1 / 4才有效 - 若列数动态（如
auto-fit+minmax(200px, 1fr)），线号不固定，1 / 4在小屏下大概率失效
跨行/跨列时 grid-column 和 grid-row 的配合逻辑
grid-column 控制列方向跨度，grid-row 控制行方向。两者独立生效，但需同时满足容器有足够行列线。
比如想让标题横跨全部列、占两行：
父容器需至少 3 列（提供线 1–4）和 3 行（提供线 1–3）
标题写成：
grid-column: 1 / -1; grid-row: 1 / 3若写成
grid-column: 1 / 4; grid-row: 1 / 3，则要求列数 ≥ 3，行数 ≥ 2；少一条线就断grid-column: span 3和grid-column: 1 / 4效果相同，但前者更鲁棒（不依赖起点线号）起点省略时（如
/ 4），默认从当前自动放置位置开始，行为难预测，慎用使用负线号（如
1 / -1）比写死数字更适应响应式变化
响应式中用 grid-column: 1 / 4 的风险点
硬编码线号在媒体查询切换列数时极易断裂。比如桌面端 grid-template-columns: repeat(6, 1fr)，移动端改成 repeat(2, 1fr)，此时 1 / 4 就越界了。
- 移动端若只有 2 列，最大线号是 3，
1 / 4无效，元素退回默认流式布局 - 更安全的做法是：用
span或负线号，或在媒体查询里重写grid-column - 如果必须用数字线号，建议配合
grid-template-areas命名区域，再用grid-column: header，语义强且不易错
线号是 CSS Grid 最容易被当“坐标”直觉使用的部分，但它本质是容器结构的副产品——结构变了，线就不是你以为的那几条。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
