grid 无效主因是容器未定义网格线，display: grid 仅开启上下文；必须显式设置 grid-template-columns 才能启用 grid-column 定位。
为什么写了 grid-column 却没效果
根本不是语法写错，而是容器压根没定义网格线。display: grid 只是开启上下文，不自动生成任何列或行。你写了 grid-column: 1 / 3，但若没配 grid-template-columns，浏览器连“第1条线”在哪都不知道。
常见错误现象：
- 页面看起来和没加 Grid 一样，子元素堆叠或流式排列
- 开发者工具里选中容器，Computed 面板看不到
grid-template-columns计算值 - 临时加
border: 1px solid red也只看到一个空盒子，没有格子
实操建议：
- 哪怕只想让子项自动等宽分列，也必须写
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) - 不要依赖
grid-auto-columns来“补救”——它只管隐式网格（超出模板范围的新增项），不激活显式定位 - 调试时优先检查容器是否真有列定义，而不是反复改子项的
grid-column
gap 替代 margin 是扁平化的关键一环
用 margin 给每个网格项手动加间距，表面看能对齐，实际在响应式下极易崩：最后一行/列多出空白、margin-collapse 干扰、媒体查询里要重复覆盖。
而 gap 是容器级控制，只作用于项目之间，不参与外边距计算，也不影响 DOM 结构。
实操建议：
- 统一删掉所有网格项的
margin-right/margin-bottom - 直接在容器上设
gap: 12px（grid-gap已废弃，不用前缀） - 注意：
gap对position: absolute的子项无效——它们已脱离网格流 - 兼容性无顾虑：Chrome 66+、Firefox 61+、Safari 10.1+、Edge 16+ 全支持
语义标签 + Grid 直接替代“wrapper div”
过去为居中、加 padding 或背景，习惯套一层 <div class="wrapper">；现在这些职责可由 <code><main></main>、<section></section> 等语义标签 + Grid 布局直接承担。
例如导航栏只需：
<nav style="display: flex; justify-content: center; gap: 24px;"><a href="#">首页</a> <a href="#">关于</a> <a href="#">联系</a> </nav>
完全不需要额外 <div class="nav-wrapper">。
<p>实操建议：</p>
<ul><li>检查现有 HTML，把仅用于样式包裹的 <code><div> 全部删掉，把样式移到语义标签上
<li>用 <code>display: grid 或 display: flex 直接写在 <header></header>、<aside></aside> 上，别再“为了布局而加容器”
transform 或 overflow: hidden 截断Grid 容器尺寸上下文决定 fr 行为
1fr 不是“1份屏幕宽度”，而是“当前容器可用空间的一份”。如果你在 <section style="width: 80%"></section> 里用 Grid，1fr 就基于这 80% 计算——但你本意可能是让它撑满视口减去 margin。
这种隐性尺寸约束，比语法错误更难排查。
实操建议：
- 避免给 Grid 容器设固定
width或max-width，除非真需要内容区域收缩 - 想居中且限制最大宽度？用
max-width: 1200px; margin: 0 auto;，而不是width: 1200px - 用
grid-template-areas前先问：结构是否真的复杂到值得牺牲 HTML 灵活性？改一个<div> 顺序就得同步改 CSS 字符串，漏引号就全崩 真正卡住人的从来不是 Grid 会不会用，而是没意识到：**每多一层无语义的 <code><div>，就多一次盒模型计算、一次继承风险、一次被 <code>overflow意外裁剪的可能**。而 Grid 的成熟，恰好让这一层“兜底容器”彻底失去存在理由。
