grid-column和grid-row的起止线必须用/分隔，单独写如grid-column: 1仅设起始线，结束线默认+1；跨区需显式写如1/4；空格分隔会被忽略；span和命名区域更适配响应式。
grid-column 和 grid-row 的起止线写法必须成对出现
单独写 grid-column: 1 或 grid-row: 2 不会跨行/列，它们只是把起始线设为该值，结束线默认紧邻其后（即 +1）。真正跨区域必须显式指定起止，比如 grid-column: 1 / 4 表示从第 1 条线开始、到第 4 条线结束（占 3 列），grid-row: 2 / -1 表示从第 2 行线开始、到最后一行线结束（跨到底部）。
常见错误是写成 grid-column: 1 4（空格分隔）——这会被浏览器忽略，必须用 / 分隔。
-
grid-column: 2 / 5→ 占第 2、3、4 列（共 3 列） -
grid-column: 2 / -2→ 从第 2 条线到倒数第 2 条线（避开最后一列） -
grid-row: span 3→ 从当前位置向下跨 3 行（等价于auto / span 3）
命名区域比数字线更安全，但需配合 grid-template-areas 使用
用 grid-area 直接声明命名区域（如 grid-area: header）看似方便，但它依赖父容器的 grid-template-areas 定义。一旦区域名拼错、或父级没定义该名称，元素就回退到自动定位，容易“消失”或错位。
而 grid-column / grid-row 基于线号，只要网格线存在就不会失效。混合使用时注意：命名区域的线号是隐式生成的，不能和显式 grid-template-columns 的线号混用逻辑——例如 grid-template-areas: "a a b"; 会生成 4 条垂直线（0–3），此时 grid-column: 1 / 3 和 grid-area: a 效果一致，但前者更可控。
立即学习“前端免费学习笔记（深入）”；
跨行跨列时，内容溢出和对齐行为容易被忽略
当一个 grid item 跨多行多列，它的子元素仍按自身内部布局规则渲染。如果子元素宽度超过该 item 的可用空间（比如设了 width: 100% 但 item 被拉伸得很大），就会触发溢出；而 align-self / justify-self 控制的是 item 在所占网格区域内的对齐，不是内容对齐。
- item 跨 2×2 区域，默认内容左上对齐，不是居中
- 要让内容居中，需在 item 内部再用 flex 或 text-align，或设
display: grid+place-items: center - 若 item 内有固定宽高的子元素，且区域不够大，
overflow: hidden必须加在 item 上，而不是 grid 容器
响应式下线号偏移会导致跨区错乱
用数字线（如 grid-column: 1 / 4）在媒体查询中修改 grid-template-columns 时，线号含义可能改变。例如桌面端 grid-template-columns: repeat(12, 1fr)，移动端改成 repeat(4, 1fr)，原来 1 / 4 是跨 3 列，现在变成跨整个宽度的 3/4 —— 视觉比例完全不对。
这时候更适合用 span 语法或命名区域：
-
grid-column: span 3→ 始终跨 3 列，不依赖总列数 - 配合
@container或 js 检测容器宽度，动态切换grid-area值 - 避免在不同断点里对同一元素写不同数字线，容易维护错乱
线号越具体，越容易在响应式中失效；span 和命名区域才是面向意图的写法。