grid-column 和 grid-row 通过 start-line / end-line 语法跨行跨列，如 grid-column: 2 / 4 表示从第2列线到第4列线；支持数字、命名线、span 关键字；-1 指隐式最后一根线；单值如 2 等价于 2 / 3；span 为相对跨度，线号为绝对定位；推荐命名线提升响应式健壮性。
grid-column 和 grid-row 怎么写才跨行跨列
直接用 grid-column 或 grid-row 的起止线号（或名称）就能跨，不是写“合并几格”，而是指定“从哪条线开始、到哪条线结束”。比如 grid-column: 2 / 4 表示从第 2 条列线开始，到第 4 条列线结束——实际占用了第 2、3 两列。
- 语法统一为
start-line / end-line，两端都支持数字、命名线（如main-start）、关键字（span 2） -
grid-column: 1 / -1表示从第一列线到最后一列线，即整行铺满（注意：-1 是隐式最后一根线，不是“倒数第一列”） - 如果只写一个值，如
grid-column: 2，等价于2 / 3，只占 1 格 - 用
span更直观：grid-row: span 3表示向下跨 3 行，起点由 Grid 自动计算（通常按源顺序填空位）
常见错误：跨列后内容溢出或错位
跨行跨列本身不会导致错位，但容易因以下原因视觉异常：
- 父容器没设
display: grid，或没定义grid-template-columns/grid-template-rows，此时grid-column无效 - 子元素设置了
width或height固定值，强行撑开格子，破坏 Grid 自动对齐逻辑 - 用
span时起始位置不明确：比如在没有显式定义行轨道的网格中，grid-row: span 2可能跨到隐式行，而隐式行默认高度是auto，导致高度塌陷 - 列线编号混淆：CSS Grid 的列线从左到右编号为 1, 2, 3…，最右边那条是
n+1；写grid-column: 2 / 2是无效的（起点等于终点），会回退到默认位置
grid-column: span 2 和 grid-column: 2 / 4 有啥区别
表面结果一样（都占两列），但行为逻辑不同：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
grid-column: 2 / 4是**绝对定位**：强制放在第 2 列线到第 4 列线之间，不管前面有没有空位，也不管其他项怎么排 -
grid-column: span 2是**相对跨度**：从当前自动分配的位置（比如第 1 格）开始向右占 2 格；若该位置已被占，Grid 会找下一个可用起始点再 span - 当网格有空缺时，
span更灵活；需要精确定位（比如固定放右下角）就用线号 - 二者不能混用同一属性：
grid-column: 2 / span 2合法，表示“从第 2 列线开始，向右跨 2 格”；但grid-column: span 2 / 4无效
响应式下跨行跨列怎么保持稳定
线号会随 grid-template-columns 改变而重排，所以硬写数字线号（如 grid-column: 1 / 4）在媒体查询里容易失效。更稳妥的做法：
立即学习“前端免费学习笔记（深入）”；
- 给关键线命名，例如
grid-template-columns: [sidebar-start] 200px [content-start] 1fr [content-end] [sidebar-end];，然后用grid-column: content-start / content-end - 用
span配合grid-auto-flow: dense，让 Grid 尽量填满空隙（注意：dense 模式可能打乱 DOM 顺序渲染） - 避免在小屏下跨太多格：比如桌面端
span 3，小屏可改用span 1+grid-row: span 2换成竖排 - 检查
grid-column-end单独设置时是否和grid-column-start冲突——某些旧版 Safari 对分写属性兼容性差，建议始终用简写grid-column
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.item-wide {
grid-column: 2 / -2; /* 从第2列线到倒数第2列线，留两边边距 */
}
.item-tall {
grid-row: 1 / span 3; /* 从第1行线开始，跨3行 */
}跨得越宽，越要确认父容器的轨道定义是否覆盖了目标线号；命名线和 span 组合使用，比纯数字更耐维护。
