新手写css Grid最常掉坑在于依赖浏览器隐式网格和默认对齐。必须显式定义grid-template-columns、设置justify-items/align-items，并慎用grid-column/grid-row数字定位，优先用gap而非margin控制间距。
新手写 CSS Grid 时，最常掉进的坑不是语法写错，而是根本没意识到浏览器在背后悄悄帮你画了网格、排了位置。你写了 display: grid，但没定义列（grid-template-columns）、没设对齐（justify-items 或 align-items），结果元素“看起来正常”，其实全靠浏览器默认规则撑着——一旦需求变一点，布局就突然崩了。
以为没写 grid-template-columns 就没网格
只要写了 display: grid，哪怕一行都没定义列宽，浏览器也会自动生成一个单列隐式网格（implicit grid）。所有子项按源顺序逐行填入，每行一个格子。这不是“没网格”，而是用隐式轨道（implicit tracks）在撑场面。问题在于：这些隐式轨道宽度是 auto，内容多就撑开，内容少就收缩，响应性极差。
- 显式声明至少一列，比如
grid-template-columns: 1fr;或grid-template-columns: repeat(3, 1fr); - 想控制隐式行高？加
grid-auto-rows: minmax(100px, auto); - 检查是否误用了隐式网格：打开开发者工具 → 选中容器 → 勾选“Show line numbers”和“Show grid areas”，立刻看到浏览器到底画了几条线
对齐方式全靠猜，不看默认值
Grid 容器有两套对齐系统：项目级（justify-items/align-items）和单个项目级（justify-self/align-self）。新手常只记得 justify-content（Flexbox 遗留印象），却忽略 Grid 中它只管整个网格容器在父容器里的定位，跟内部子项无关。
-
justify-items: stretch（默认）会让所有项目拉满列宽；想居中？得写justify-items: center或给单项加justify-self: center -
align-items: stretch同理，默认拉高；若子项有固定高度或内容少，又没设min-height，就会显得“空荡荡” - 别依赖浏览器默认对齐——明确写出来，既是意图表达，也是可维护性的起点
把 grid-column/grid-row 当“绝对定位”乱用
写 grid-column: 3 / 5 看似简单，但若容器没定义三列以上，浏览器会自动扩展隐式网格来满足你。表面生效，实则埋下隐患：后续加个 grid-template-columns 就可能让原有定位失效，因为显式网格优先级高于隐式。
立即学习“前端免费学习笔记（深入）”；
- 先规划好显式网格结构，再分配项目位置；位置声明应基于你定义好的线号
- 用命名线（
grid-template-columns: [start] 1fr [main] 2fr [end];）代替数字，语义清晰、不易出错 - 避免
grid-column: span 2不加限制——它会往右尽可能跨，可能跨到隐式区域，导致不可预期的空白或重叠
忽略 gap 和 margin 的叠加效应
gap 是 Grid 专属间距，作用于网格轨道之间；而 margin 是项目自身的外边距。新手常两者混用，比如给项目设 margin: 10px 又加 gap: 10px，结果间距变成 20px 还一脸懵。
- Grid 布局中，优先用
gap控制项目间距；它不会触发 margin 折叠，也不影响对齐逻辑 - 如果项目内还需额外留白，用
padding比margin更安全 - 注意：
gap对grid-row跨行项目无效——它只在相邻轨道间起作用，跨行项目内部的“行内间隙”得靠其他方式处理