grid-column和grid-row的线号从1开始，显式轨道数+1；span需明确起点，否则受自动流影响；grid-area更可靠，响应式推荐命名线或负值。

直接写 grid-column 和 grid-row，别信“grid-column-span”这种不存在的属性；真正卡住人的不是语法错，而是线号算错、隐式轨道干扰、span 起点不可控。

grid-column / grid-row 的线号怎么数才不翻车

网格线从 1 开始编号：容器左边缘是第 1 条竖线，上边缘是第 1 条横线，向右/下依次递增。grid-column: 2 / 4 表示从第 2 条竖线开始、到第 4 条竖线结束（占第 2、3 两列），不是“跨越 4 列”。

• 显式定义 grid-template-columns: 1fr 2fr 1fr → 共有 4 条竖线（1–4）
• grid-column: 1 / -1 合法，表示从最左到最右（含所有显式列）
• 负值倒数：grid-column: -3 / -1 在 3 列布局中等价于 1 / 3
• gap 不产生新线，但会撑开线间距——线号不变，视觉上容易误判对齐位置

span 写法为什么经常“不按预期占位”

grid-column: span 2 不等于“固定占两列”，它依赖自动放置起点，而这个起点受 grid-auto-flow、已有元素顺序、甚至 order 影响。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 前面有 grid-column: 1 / 3 的元素，后续 span 2 可能从第 3 列开始，也可能跳到第 5 列（中间有空隙时）
• 想强制从第 2 列开始再跨 2 列，必须写全：grid-column: 2 / span 2
• grid-row: span 3 可能落在隐式行里，导致高度失控——建议同步设置 grid-auto-rows: minmax(60px, auto) 约束隐式行高度
• grid-column: span 2 / 4 是无效声明，整条规则会被浏览器丢弃（DevTools 中显示删除线）

grid-area 一行写死四条线更可靠

当布局模块稳定（如仪表盘的 header/sidebar/main），grid-area 比分开写 grid-column+grid-row 更紧凑、不易漏项。

• grid-area: 2 / 1 / 4 / 3 等价于 grid-row: 2 / 4 + grid-column: 1 / 3
• 支持 span：grid-area: 1 / 2 / span 2 / span 3 表示从第 1 行第 2 列开始，跨 2 行 3 列
• 只给两个值（如 grid-area: 1 / 2）会让缺失的 row-end 和 column-end 按规则补为 auto，不如显式写全可控
• grid-area 是简写，会覆盖 grid-row-start 等独立属性，调试时别被 DevTools 里灰掉的属性骗了

响应式下跨列跨行突然错乱的根本原因

线号不是静态编号，它随 grid-template-columns 动态重排：

• 桌面端 grid-template-columns: repeat(4, 1fr) → 有 5 条竖线（1–5）
• 移动端改成 repeat(2, 1fr) → 只剩 3 条竖线（1–3）
• 用数字线号的 grid-column: 1 / 5 在移动端会失效或触发隐式列，改用命名线（grid-column: sidebar-start / sidebar-end）或负值（1 / -1）更稳

最常被忽略的是：显式定义的网格线数量必须和你写的线号匹配，否则声明静默失效；span 的“自动起点”在复杂流中根本不可靠，硬编码起止线或改用 grid-area 才是真可控。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！