grid-column跨列必须显式指定起止线，仅写span 2无效；推荐用具体线号如2/4或命名线，避免依赖自动布局导致不可控。
grid-column 跨列必须显式指定起止线
只写
是不够的，浏览器无法自动推断从哪开始跨。你得明确告诉它起点和终点，比如
表示从第 2 条网格线开始、到第 4 条网格线结束（即跨过第 2、第 3 列）。
常见错误是写成
—— 这在部分浏览器里不被支持，CSS Grid 规范只允许
出现在第二个位置（即
），且
依赖于隐式定位逻辑，容易失控。
推荐写法：用具体线号，如
或
（跨满整行）
若列数动态变化，可用命名线：
负索引从右往左数，
是最右侧那条线，不是最后一列的起始线
grid-column: span N 的行为取决于起始位置
看似简单，但它实际含义是“从当前自动分配的位置向右跨 2 格”。这个“当前位置”由 Grid 自动布局规则决定，可能受
、相邻元素、甚至
设置影响，结果不可控。
在
（默认）下，元素按行顺序填入，
会从它本该落下的那一格开始跨
如果前面有已定位元素占位，它可能被挤到下一行，再跨列——这往往不是你想要的
想稳定跨列？放弃
，直接用线号定位：
是合法的，但等价于
，不如写死更清晰
跨列元素会破坏后续元素的自动流布局
一旦某个元素用了
，它占据的是第 2、3 列的全部高度。后面没指定位置的元素不会“绕开”它，而是继续按行顺序往下排，可能出现在第 1 列第 2 行，也可能跳到第 4 列——取决于
模式。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
：后续元素优先填满当前行剩余列，再换行
：后续元素优先往下填同一列，容易导致错位
避免意外：给所有关键元素都显式设置
和
，别依赖自动流
响应式跨列要小心线号失效
用数字线号（如
）在媒体查询里改
后，原有线号可能不存在了。比如原为
有 4 条线，改成
就只剩 3 条线，
会回退到
或直接失效。
方案一：用命名线 +
，统一管理区域名
方案二：媒体查询内重写整个
，例如：
方案三：用
配合
，语义更稳
跨列本身不难，难的是跨得可控。线号不是“数字编号”，而是网格容器上真实存在的分隔标记；漏掉起点或终点，或者指望
在复杂布局里智能对齐，大概率会卡在调试环节。
grid-column: span 2grid-column: 2 / 4grid-column: 1 / span 2span Ngrid-column: auto / span 2autogrid-column: 2 / 4grid-column: 1 / -1grid-template-columns: [start] 1fr [middle] 1fr [end];
grid-column: start / end;-1grid-column: span 2grid-auto-flowgrid-rowgrid-auto-flow: rowspan 2spangrid-column: 3 / span 2grid-column: 3 / 5grid-column: 2 / 4grid-auto-flowgrid-auto-flow: rowgrid-auto-flow: columngrid-columngrid-rowgrid-column: 1 / 4grid-template-columnsrepeat(3, 1fr)repeat(2, 1fr)1 / 41 / 3grid-areagrid-column@media (max-width: 768px) {
.hero { grid-column: 1 / -1; }
}grid-column: 1 / -1grid-template-areasspan