必须显式设置display: grid，否则所有网格属性无效；fr按剩余空间分配但受min-content限制；grid-area需严格匹配grid-template-areas定义；IE11需独立兼容方案。
div作为Grid容器必须加display: grid
不加这句，grid-template-columns这些属性全无效——浏览器根本不会把它当网格容器处理。常见错误是只写了列定义却忘了设display，结果子元素还是默认文档流排列，看起来跟没写CSS一样。
注意：display: grid会让容器变成块级元素，独占一行；如果需要内联表现（比如嵌在文字流里），改用display: inline-grid。两者对子元素的网格项行为完全一致，只是容器自身显示类型不同。
- 别用
display: block或display: flex混着写，会覆盖掉Grid行为 - 父容器上设置即可，子
div不用重复加display: grid（除非它自己也要当网格容器） - 旧版IE完全不支持，如需兼容，得另配Flexbox降级方案
grid-template-columns和grid-template-rows控制行列结构
这两个属性决定网格“骨架”，直接写在div容器的CSS规则里。比如三列等宽布局：grid-template-columns: 1fr 1fr 1fr；两行固定高：grid-template-rows: 100px 200px。
fr单位是比例分配的关键，1fr ≠ 1px，而是“剩余空间均分”；auto会按内容撑开，minmax(200px, 1fr)则限制最小宽度又保留弹性。别硬套像素值，尤其做响应式时。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 列数多但内容少？用
repeat(auto-fit, minmax(250px, 1fr))自动适配容器宽度 - 行高写
1fr却没效果？检查是否父容器高度未定义（比如没设height或min-height） - 避免混用
px和%，百分比在Grid中依赖父容器宽度，而fr更可靠
子div默认按顺序填入网格单元格
只要父div设了display: grid，所有直接子div自动成为网格项，从左到右、从上到下依次填入单元格。不需要给每个子div加grid-column或grid-row——除非你要打破这个顺序。
想让某个子div跨两列？加grid-column: span 2；想让它独占第二行？加grid-row: 2。这些声明写在子元素自己的CSS里，不是父容器上。
- 子元素加
float或position: absolute会脱离网格流，慎用 - 用
gap代替margin控制网格项间距，它只作用于网格内部间隙，不影响外部布局 - 子
div若含文本，记得设word-break: break-word防长单词撑破列宽
高度塌陷和overflow问题在Grid中基本消失
传统Float或Flex布局常遇到父容器高度塌陷（子元素浮动后父容器高度为0），但Grid容器天然具备BFC特性，只要子项有尺寸，父div就会正确包裹。不过仍可能踩两个坑：
- 子
div用了height: 100%但父容器没显式高度 → 父div高度为0，子项也撑不开 - 内容超长导致横向滚动 → 加
overflow-x: auto到容器，或用minmax()约束列宽 - Grid容器本身被设了
max-width但子项用1fr，可能造成空白区域，此时应检查grid-template-columns是否与内容匹配
Grid真正省心的地方在于：你不用再为清除浮动、触发BFC、计算margin塌陷费神——但前提是理解fr怎么算、gap和margin的区别、以及子项定位优先级。这些细节一旦写错，布局就静默失效，很难一眼看出哪行CSS在捣鬼。
