grid容器未设display: grid时子元素完全不按网格布局，所有grid-*属性失效；必须显式声明display: grid或inline-grid，且需检查computed styles确认未被覆盖。
grid容器没设display: grid会怎样
子元素完全不按网格布局，表现和普通块级元素一样，grid-column、grid-row 等属性全部失效，浏览器直接忽略。
必须确保父容器显式声明：display: grid 或 display: inline-grid。仅靠子元素设置定位属性毫无意义。
- 检查 computed styles 里
display是否真为grid（有时被后续 CSS 覆盖） - 避免用
display: -ms-grid等过时前缀替代标准值 - Flexbox 容器里嵌套的元素即使写了
grid-column也不会生效
子元素用了grid-column但位置不对
常见原因是起始/结束线编号理解错误，尤其当容器定义了 grid-template-columns 后，列线从 1 开始编号，不是从 0；且隐式网格线也参与计数。
比如：grid-template-columns: 1fr 2fr 生成 3 条垂直线（1–2–3），写 grid-column: 1 / 3 才跨两列；grid-column: 1 / 2 只占第一列。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器 devtools 的 layout 面板勾选 “Show line numbers” 直观查看线号
-
grid-column: span 2比硬写终点线更安全，尤其在响应式中列数可能变化时 - 注意
grid-column-start和grid-column-end单独设时，未声明的默认值是auto，可能触发隐式定位逻辑
子元素重叠或错位还伴随margin/padding异常
Grid 布局下，子元素的 margin 不会触发外边距合并，但若容器设置了 gap，它和 margin 共存时容易误判间距来源；更关键的是，align-self 或 justify-self 被设为 start/end 时，会覆盖默认居中行为，导致视觉偏移。
- 先临时清空所有
margin、padding、align-self、justify-self，确认是否回归预期位置 -
gap是网格轨道间的空隙，不作用于子元素自身盒模型，别把它当 margin 用 - 如果子元素是替换元素（如
<img>），其固有宽高 +object-fit也会影响在格子内的对齐表现
响应式切换后grid定位突然失效
媒体查询中只改了 grid-template-columns，但忘了同步调整子元素的 grid-column 范围，比如原写死 grid-column: 1 / 4，而断点后只有 2 列，线 4 就不存在了，浏览器会 fallback 到 auto 行为，结果不可控。
- 优先用
span语法（如grid-column: span 2）代替绝对线号 - 必要时在每个断点里完整重写子元素的定位规则，而不是只改容器
- 避免在子元素上用
grid-area引用未在grid-template-areas中定义的名称，否则该属性无效且无提示
