根本原因是容器未定义grid-template-columns或grid-template-rows，导致网格线不存在；仅display: grid不会生成轨道，子项默认挤在第1行第1列，grid-column声明被静默忽略。
为什么grid-column写了却没效果
根本原因是容器没定义 grid-template-columns 或 grid-template-rows，网格线压根不存在。只写 display: grid 不会自动生成任何轨道——所有子项默认挤在第 1 行第 1 列，grid-column: 1 / 3 这种写法直接被忽略。
- 调试时加
border: 1px solid red到容器上，看是否有列被渲染出来 -
grid-auto-columns和grid-auto-rows是隐式网格兜底机制，仅对超出模板范围的内容生效，不能替代显式定义 - 用 DevTools 的 Layout 面板检查“Grid”标签页，确认是否真有轨道生成
grid-template-columns 怎么写才真正响应式
用像素或百分比硬写列宽，在小屏下极易断裂；fr + minmax() 才是现代写法的核心。
-
repeat(auto-fit, minmax(250px, 1fr))：每项最小 250px，容器够宽就多列，不够自动换行，空轨道被折叠（日常几乎只用auto-fit，不用auto-fill） -
minmax(250px, 1fr)中的1fr不是固定值，而是“剩余空间等分”，依赖容器总宽和其他轨道尺寸 - 避免混用单位：
50% 1fr或100px auto 1fr容易因基准不确定或内容撑开导致错位
gap 比 margin 更可靠，但得知道它不干啥
gap 是容器级属性，只控制项目之间的空隙，不碰外边距逻辑，也不影响绝对定位项。
- 给每个网格项写
margin-bottom或margin-right是过时做法：最后一行/列会多出空白，还可能触发 margin collapse -
gap: 12px等价于row-gap: 12px; column-gap: 12px，旧名grid-gap已废弃，无需前缀 -
position: absolute的网格项不参与gap计算，它脱离网格流了
grid-template-areas 什么时候该用、怎么不出错
命名区域是语法糖，不是银弹。结构简单时（比如三栏、两行卡片），直接用 grid-column/grid-row 更轻量、更易调试。
- 只有语义强、结构复杂（如仪表盘含
header/sidebar/main/footer+ 多张卡片）才值得用grid-template-areas - 区域名大小写敏感、不能含短横线（
main-nav❌，main_nav✅），留空必须用.占位 - 字符串行数必须与
grid-template-columns定义的列数一致，否则整条规则静默失效
grid-column 临时画线。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
