根本原因是容器未定义列轨道，grid-column依赖真实网格线，display: grid仅开启上下文而不自动生成行列；必须显式声明grid-template-columns（如1fr或repeat(auto-fit, minmax(280px, 1fr))），否则线号不存在导致定位静默失效。
为什么写了 grid-column 却没效果
根本原因是容器没定义列轨道，grid-column: 1 / 3 这类定位依赖真实存在的网格线，而浏览器不会凭空生成——display: grid 只是开启上下文，不自动创建列或行。
调试时最直接的验证方式：给容器加一句 border: 1px solid red，再看是否有列被渲染出来。没有？那就说明 grid-template-columns 缺失。
- 必须显式写
grid-template-columns（哪怕只用1fr） -
grid-auto-columns和grid-auto-rows是隐式网格兜底机制，不能替代显式模板 - 写错单位（比如混用
%和fr）会导致列宽计算异常，看起来像“没生效”
grid-template-columns 怎么写才真正响应式
新手常写 1fr 1fr 1fr，结果小屏上卡片挤成窄条、大屏留大片空白。关键不是“等分”，而是“最小可用 + 弹性伸缩”。
推荐起步写法：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
-
minmax(280px, 1fr)：每列至少 280px 宽，超出部分均分剩余空间 -
auto-fit：空列会被折叠，避免右侧留白；auto-fill则保留空槽，日常几乎不用 - 避免
50% 1fr这类混用，百分比基准不确定，容易错位 - 如果要固定侧边栏 + 主内容，用
250px 1fr比媒体查询更轻量
用 gap 而不是 margin 控制间距
给每个网格项写 margin-right 或 margin-bottom 是典型过时做法，会导致最后一行/列多出空白、换行错位，还可能触发 margin collapse。
正确做法：统一在容器上设 gap: 16px（旧名 grid-gap 已废弃，无需前缀）。
-
gap只作用于项目之间的空隙，不影响外边距逻辑 - 它对
display: inline-grid同样有效 - 若某项目用了
position: absolute，它将不参与gap计算 - 所有主流浏览器（Chrome 66+、Firefox 61+、Safari 10.1+、Edge 16+）已原生支持
什么时候该用 grid-template-areas
命名区域是语法糖，底层仍靠网格线定位。过早使用反而增加维护成本：HTML 结构一动，CSS 字符串就得同步改，漏引号或顺序错就全崩。
简单布局（如三栏、两行卡片）直接用 grid-column: 1 / 2 更轻量、更易调试。
- 只有当结构复杂、语义强（比如仪表盘含
header/sidebar/main/footer+ 多张卡片）时，才值得用grid-template-areas - 用之前先确保
grid-template-columns和grid-template-rows已正确定义，否则区域名无法映射到真实轨道 - 区域字符串中每个单词对应一个单元格，空格代表空单元格，换行必须严格对齐
span 表示跨格数量而非终点线号**——比如 grid-column: 2 / span 2 是从第 2 线开始跨 2 格，落到第 4 线，不是“到第 2 线为止”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
