根本原因是容器未显式定义grid-template-columns，仅display: grid不生成网格线；必须设置如grid-template-columns: 1fr后，grid-column: 1 / 2才生效。
为什么写了 grid-column 却没效果
根本原因：容器没定义列轨道，网格线压根不存在。display: grid 只是开启上下文，不自动生成列或行。哪怕只写一行 grid-template-columns: 1fr，grid-column: 1 / 2 才能生效。
- 调试时先加
border: 1px solid red到容器上，确认是否有列被渲染出来 -
grid-auto-columns和grid-auto-rows是隐式网格兜底用的，不能替代显式声明 - 浏览器不会根据子元素数量自动推断列数——这是常见误解，必须手动定义
grid-template-columns 怎么写才不翻车
列宽单位混用、最小宽度失控、响应式断裂，基本都出在这一步。关键不是“怎么写”，而是“为什么这么写”。
- 避免
50% 1fr：百分比基准不确定（父容器 width？内容撑开？），容易错位 -
minmax(250px, 1fr)比纯1fr更安全：保证最小可用宽度，又允许弹性伸缩 -
repeat(auto-fit, minmax(250px, 1fr))是卡片类布局标配；auto-fill会保留空槽，日常几乎只用auto-fit - 固定像素列（如
200px）后面接1fr，适合侧边栏+主内容结构
gap 要比 margin 优先用
给每个网格项写 margin-bottom 或 margin-right 是过时做法，会导致最后一行/列多出空白、响应式错位，还可能触发 margin collapse。
- 统一用容器级
gap: 12px（旧名grid-gap已废弃，无需前缀） -
gap只作用于项目之间，不影响外边距逻辑，也不影响display: inline-grid - 某项目用了
position: absolute，它就脱离网格流，不参与gap计算 - 所有主流浏览器（Chrome 66+、Firefox 61+、Safari 10.1+、Edge 16+）已原生支持
gap
什么时候该用 grid-template-areas
它本质是语法糖，底层仍靠网格线定位。过早使用反而增加维护成本，改 HTML 结构就得同步改 CSS 字符串，引号漏一个就整个布局崩。
- 简单布局（如三栏、两行卡片）直接用
grid-column: 1 / 2更轻量、更易调试 - 只有结构复杂、语义强（如仪表盘含
header/sidebar/main/footer+ 多张卡片）时，才值得用grid-template-areas提升可读性 - HTML 中加个广告位、换顺序，CSS 里字符串就得重写一遍，容易漏改或引号错位
grid-column: -2 / -1 是最后一列）；span 写法（grid-column: 1 / span 2）比 1 / 3 更易维护——但旧版 Safari 对 span 支持不稳定，生产环境建议用具体线号。**前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
