网格需显式定义 grid-template-columns 和 grid-template-rows 才生效；漏写则所有子项堆在左上角；repeat(auto-fit, minmax(250px, 1fr)) 实现响应式布局；grid-template-areas 要严格匹配 grid-area 名称且列数一致；gap 替代 margin 避免空白和塌陷；ie 完全不支持 grid。
grid-template-columns 和 grid-template-rows 必须显式写，否则网格不生效
只加 display: grid 不会自动画出格子——浏览器默认只生成 1 列、行高由内容撑开，所有子元素堆在左上角第一格里，看着和普通块级流一模一样。真正“画线”靠的是这两条：
-
grid-template-columns定义垂直方向的列线（比如1fr 2fr或repeat(3, 1fr)） -
grid-template-rows定义水平方向的行线（比如100px auto或repeat(2, minmax(80px, 1fr))）
漏掉任一个，grid-column: 1 / 3 这类定位就会失效：线号 1/2/3 根本不存在，浏览器直接忽略。
repeat(auto-fit, minmax()) 是响应式卡片布局的核心写法
固定列数（如 repeat(4, 1fr)）在小屏下会挤成窄条；纯 auto-fill 又容易留空槽。真正实用的是：
-
repeat(auto-fit, minmax(250px, 1fr))：每项最小 250px，容器够宽就多列，不够就自动换行，空轨道被折叠 -
minmax(250px, 1fr)中的1fr不是像素，而是“剩余空间等分”，依赖于容器宽度和其他轨道尺寸 - 别混用
fr和auto，比如1fr auto会导致auto项撑满剩余空间，失去预期行为
grid-template-areas 要配合 grid-area 才能生效，且语法极其敏感
写了 grid-template-areas: "header header" "main sidebar" 却没效果？大概率是以下任一问题：
- 子元素没写
grid-area: "header"——区域名必须完全一致（包括引号、空格、大小写） - 某行单词间多了/少了空格，或引号没闭合，整条规则被浏览器静默丢弃（DevTools 的 computed 样式里看不到它）
- 同时写了
grid-area和grid-column，后者会覆盖前者，区域模板对该元素失效 - 区域总列数超过
grid-template-columns定义的列数（比如定义了 3 列却写了"a b c d"），整个grid-template-areas失效
gap 比 margin 更安全，但 IE 完全不支持
用 margin 给网格项加间隔，最后一行/列会多出空白，还可能触发 margin collapse；gap 是容器级属性，只控制项目之间的空隙：
-
gap: 12px等价于row-gap: 12px; column-gap: 12px - Chrome 66+、Firefox 61+、Safari 10.1+、Edge 16+ 均原生支持，无需前缀
- 如果必须兼容 IE，别用 Grid —— polyfill 都是伪解，IE 对
display: grid完全无反应
真正卡住人的从来不是语法记不住，而是忘了：网格线得手动画出来，gap 得代替 margin，区域名得一一对应，而且 IE 就是不认这个东西。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
