grid-column写了没效果，根本原因是容器未声明grid-template-columns，导致列线未生成；必须显式定义列结构（如repeat(3,1fr)），仅设display:grid不创建实际列线。
grid-column写了没效果？先检查这两行
根本原因不是语法写错，而是容器压根没生成网格线——display: grid只开启上下文，不自动创建列或行。哪怕你写了grid-column: 1 / 3，只要没配grid-template-columns，浏览器就当它不存在。
- 必须显式声明列结构，比如
grid-template-columns: 1fr 1fr 1fr或grid-template-columns: repeat(3, 1fr) - 行结构可省略（浏览器会按内容自动生成隐式行），但列几乎不能省——否则所有列定位都失效
- 调试时加一句
border: 1px solid #f00到容器上，看有没有实际列被渲染出来，比反复查 CSS 更快
三栏响应式布局最简写法
别一上来就写grid-template-areas，简单多栏直接用repeat(auto-fit, minmax(250px, 1fr))，一行搞定，适配手机到桌面全场景。
-
minmax(250px, 1fr)保证每栏至少 250px 宽，避免小屏挤成一条线 -
auto-fit会让空列自动收缩消失，auto-fill则保留空槽，日常选auto-fit - 搭配
gap: 12px控制项间间距，别用margin——后者在最后一行/列会多出空白，还可能触发 margin collapse - 完整示例：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))); gap: 12px;
grid-column: 2 / 4 和 grid-column: 2 的区别
线号从 1 开始数，不是从 0；grid-column: 2是简写，等价于2 / 3，只占一格；而2 / 4是从第 2 条线开始、到第 4 条线结束，跨两列。
- 想跨三列？写
grid-column: 1 / span 3比1 / 4更安全——改列数时不用同步调终点线号 - 最后一列用
grid-column: -2 / -1，负号从右往左数，Chrome/Firefox 支持良好，旧 Safari 对span有兼容问题，生产环境建议用具体线号 - 注意：项目只能是容器的直接子元素，嵌套一层的子元素不会被 Grid 定位
什么时候才该用 grid-template-areas
命名区域是语法糖，不是必需品。只有当结构复杂、语义强（比如仪表盘含 header/sidebar/main/footer + 多张卡片）且 HTML 结构长期稳定时，才值得引入。
- 三栏、两行卡片这类布局，直接用
grid-column/grid-row更轻量、调试更直观 - 一旦 HTML 加个广告位或换顺序，
grid-template-areas字符串就得同步改，引号漏一个或空格错位都会崩 - 它底层仍靠网格线定位，写
grid-area: header和写grid-column: 1 / 4; grid-row: 1 / 2效果一样，只是可读性换维护成本
minmax()里最小宽度设太小，或者gap和padding混用导致尺寸错乱。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
