span不是独立属性，必须作为grid-column或grid-row值的一部分且仅出现在斜杠右侧；正确写法如grid-column: 2 / span 3，而grid-column-span或span: 2无效。

span必须和grid-column或grid-row一起用，单独写无效

很多人写 grid-column-span: 2 或 span: 2，浏览器直接忽略——CSS规范里压根没有这两个东西。span 不是属性，而是 grid-column 和 grid-row 值的一部分，且只能出现在斜杠右侧。

• grid-column: span 2 合法，但起点由 Grid 自动推断（通常是第一个空闲列），结果不可控
• grid-column: 2 / span 3 才是稳定写法：从第 2 条列线开始，向右占 3 条轨道（即第 2、3、4 列）
• grid-column: span 3 / 5 是非法语法，整条声明会被丢弃

grid-area一行写完跨行+跨列，但顺序不能错

当既要跨行又要跨列，grid-area 是最紧凑的方案，但它有固定顺序：行起 / 列起 / 行跨 / 列跨。漏掉某项会回退到 auto，写错位置则失效。

• grid-area: 1 / 2 / span 2 / span 3 → 行从第 1 线起、跨 2 行；列从第 2 线起、跨 3 列
• grid-area: 1 / 2 / 3 / span 4 → 行从 1 到 3（占 2 行），列从 2 起跨 4 列
• grid-area: 1 / span 2 / 3 / 4 错误：span 只能出现在终点位置，不能插在中间

span 跨越后布局错位？大概率是轨道没撑开或隐式线被误用

表面看 span 没生效，实际常因网格容器没定义显式轨道，导致跨越落进隐式网格——那里的轨道尺寸默认是 auto，内容一撑就变形。

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

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

下载

• 写了 grid-column: 1 / span 5，但 grid-template-columns 只设了 3 列 → 浏览器补 2 条隐式列线，宽度按内容算，可能窄得看不见或挤爆容器
• grid-row: -2 / span 1 合法（倒数第二行线起），但 grid-row: span -2 无效：span 不支持负数
• 网格项里放了 width: 100% 的子元素，而所在列轨道是 max-content → 子项强行撑宽整列，连带影响其他项

响应式中用span要小心，硬写数字跨度容易越界

媒体查询切列数时，span 3 在 2 列布局下会触发隐式第 4 条线，行为难预测；相比起来，用命名线或负数线更稳。

• 推荐 grid-column: 1 / -1（从第 1 列线到最右线），比 span 12 更适应列数变化
• 如果用了 grid-template-areas，优先用命名区域如 grid-area: header，语义强、不依赖线号
• grid-column: span 2 在瀑布流类布局中可用，但在复杂嵌套或已手动定位其他项的容器里，极易因 grid-auto-flow 干扰而错位

真正容易被忽略的是：span 的“起点”不是凭空出现的，它要么来自你写的数字线号，要么来自 Grid 的自动放置逻辑——而后者受容器已有项、grid-auto-flow 模式、甚至 HTML 源码顺序影响。不显式指定起点，等于把控制权交给浏览器。

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