<p>初学者写 CSS Grid 最易在“看似能跑”和“真正可控”间掉坑，核心在于未建立对 grid-template-* 和 gap 的显式控制意识：须先用 grid-template-columns/rows 定义显式骨架，用 gap 替代 margin 控制间距，通过 justify-items/align-items 精确控制子项对齐，并基于命名线或明确轨道数使用 grid-column/grid-row。</p>
初学者写 CSS Grid，最容易在“看似能跑”和“真正可控”之间掉坑。问题往往不出在语法报错，而在于没建立对网格结构的显式控制意识——尤其是 grid-template-* 和 gap 这两个基础但关键的环节。
误用 grid-auto-* 代替 grid-template-*
很多人写了 display: grid，接着就直接上 grid-auto-columns: 1fr 或 grid-auto-rows: 100px，结果布局飘忽、响应异常。
- grid-auto-columns/rows 只控制“隐式网格”的轨道尺寸（即超出你定义范围后浏览器自动补的列或行），它不定义主结构
- 真正该先写的，是 grid-template-columns 和 grid-template-rows ——它们明确画出你想要的显式网格骨架
- 比如想做三列等宽布局，应写：
grid-template-columns: repeat(3, 1fr)，而不是依赖grid-auto-columns - 没写
grid-template-*？浏览器会悄悄用单列隐式网格撑着，内容一变就错位
忽略 gap，反而用 margin 挤间距
给网格项加 margin 来制造间隔，是早期 Flexbox 思维残留，Grid 里这会破坏对齐、引发重叠甚至触发隐式网格扩张。
-
gap（或
row-gap/column-gap）是专为网格设计的间距属性，只作用于网格单元格之间，不影响项目自身盒模型 - 用
margin不仅要反复计算方向和边界，还会让项目实际占用空间变大，导致列宽计算失准 - 正确做法：容器上统一设
gap: 12px，清爽、可继承、响应友好 - 注意：
gap对 flex 布局也生效（现代浏览器），但 Grid 中它是唯一推荐方案
不声明模板就幻想“自动对齐”
新手常以为只要 display: grid，再配个 justify-content: center 就能居中所有子项——其实这只影响整个网格容器在父容器里的位置，跟内部子项排布毫无关系。
立即学习“前端免费学习笔记（深入）”；
- 子项横向对齐靠 justify-items（默认
stretch），纵向靠 align-items - 想让所有项目内容居中？写
justify-items: center; align-items: center - 若只希望某一个项目特殊对齐，用
justify-self或align-self，别改全局 - 不写这些？浏览器按默认拉伸填充，内容少时显得空、内容多时溢出，且无法预测
把 grid-column/grid-row 当坐标乱填
看到 grid-column: 2 / 4 就照抄，却不检查容器有没有至少 4 条垂直线（即至少 3 列）。
- 数字定位必须基于你定义好的显式网格线；否则浏览器会自动生成隐式轨道来“满足你”，埋下后续重构雷
- 更安全的做法：用命名线，比如
grid-template-columns: [start] 1fr [main] 2fr [end]，然后子项写grid-column: start / end - 避免无约束的
span，如grid-column: span 2—— 它可能跨到隐式区域，造成空白或重叠 - 调试时打开开发者工具 → 选中容器 → 勾选 “Show line numbers” 和 “Show grid areas”，一眼看清真实网格结构
