grid-column和grid-row必须配合显式定义的网格线使用，否则可能静默失效；线号从1开始编号，负值倒数，gap不产生新线，span依赖自动放置起点，grid-area更可靠，响应式需同步调整线号或改用命名线/负值。
grid-column 和 grid-row 必须配合显式定义的网格线使用，否则声明可能静默失效；真正卡住人的不是语法写错，而是线号根本不存在或被隐式轨道干扰。
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 影响。
常见错误现象：
• 前面有 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: 2 / 5 在移动端直接越界，元素回退到默认位置。
解决方案：
• 媒体查询里同步调整 grid-template-columns 和子项的 grid-column；
• 改用命名线（grid-column: content-start / content-end）或负值线（grid-column: 2 / -1）；
• 避免硬写大数字（如 grid-row: 1 / 99），-1 始终指向容器末尾那条线，更可靠。
grid-template-rows 或 grid-template-columns 显式生成，或者由内容撑出足够多的隐式轨道。调试时第一件事，永远是打开 DevTools 的 Grid overlay 看线画出来了没有。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
