根本原因是未定义列轨道，display: grid 仅启用网格布局但不自动生成列线；必须显式设置 grid-template-columns（如 1fr 1fr）或使用 repeat(auto-fit, minmax()) 才能触发网格项正确排列。
grid-template-columns 不写就等于没布局
写了 display: grid 但项目还是垂直堆叠？根本原因就是没定义列轨道。浏览器不会自动猜你想要几列——grid-column: 1 / 3 这种定位语法依赖真实存在的网格线，而线只在 grid-template-columns 或 grid-template-rows 显式声明后才生成。
常见错误现象：加了 display: grid，再写 grid-area 或 grid-column，页面毫无变化，控制台也没报错，纯“静默失效”。
- 最简可用写法：
grid-template-columns: 1fr 1fr 1fr（三等分）或grid-template-columns: repeat(3, 1fr) - 响应式起点写法：
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))，注意是auto-fit，不是auto-fill - 别混用单位：
50% 1fr容易因百分比计算基准不一致导致列宽错乱，统一用fr或minmax()
gap 比 margin 更可靠，且必须写在容器上
gap 是网格项之间的间隙，它不参与盒模型计算，也不触发 margin collapse，更不会在最后一行/列额外留白。而给每个 .grid-item 加 margin-right 和 margin-bottom 是旧套路，在响应式换行时极易出错。
容易踩的坑：用已废弃的 grid-gap，或误以为 gap 能作用于容器外边距——它只管“项与项之间”，不管“容器和外部元素之间”。
- 正确写法：
gap: 12px（所有现代浏览器都支持，包括 Safari 14.1+） - 如果卡片内有图片，记得同步设
img { width: 100%; height: auto; }，否则可能撑破网格项高度 - 配合
box-sizing: border-box使用，避免 padding 把内容挤出预设轨道
grid-column / grid-row 的线号从 1 开始数
网格线编号永远从容器边缘起算：最左边是第 1 条纵线，最上边是第 1 条横线。grid-column: 2 / 4 表示“从第 2 条线开始，到第 4 条线结束”，实际占两列；而 grid-column: 2 是简写，等价于 2 / 3，只占一格。
调试时容易把“第 n 列”直接当成 grid-column: n，结果定位偏移一格。负数线号是合法的：grid-column: -2 / -1 就是最后一列，但旧版 Safari 对 span 语法兼容性差，生产环境建议用具体数字。
- 跨列推荐写法：
grid-column: 1 / span 2（比1 / 3更易维护，增删列时不需改终点） - 单列定位直接写
grid-column: 2即可，不用写完整范围 - Firefox 和 Chrome 对负线号支持一致，但若需兼容 Safari ≤15.3，避免用
span，改用明确线号
grid-template-areas 是语法糖，别一上来就用
grid-template-areas 本质是把命名区域映射回网格线，它提升语义可读性，但增加耦合度：HTML 结构微调（比如插个广告位），CSS 字符串就得同步改，漏一个引号或空格就整个布局崩掉。
简单布局（如三栏、两行四列卡片）完全没必要引入命名区域。真正值得用它的场景只有结构复杂、语义强、长期维护的仪表盘类页面。
- 轻量替代方案：
grid-column: 1 / 2+grid-row: 1 / 2直接定位，调试直观 - 要用
grid-template-areas，务必保证 HTML 子元素顺序和字符串一一对应，不能跳项 - 命名区域中用点（
.）表示空单元格，但过多点会降低可读性，不如显式留白
真正卡住人的往往不是语法本身，而是忘记显式定义行列——哪怕只想要“自动均分”，也得靠 repeat(auto-fit, minmax()) 这类模板驱动，而不是指望浏览器智能推断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
