CSS Grid 必须显式声明 display: grid，否则所有网格属性无效；fr 单位按剩余空间分配且受 min-content 限制；grid-area 需严格匹配 grid-template-areas 定义；IE11 需独立兼容方案。
grid 容器必须显式声明 display: grid，否则子元素的grid-column 等属性无效
很多人写完 grid-column: 1 / -1 发现没反应，根本原因是父容器没加display: grid——CSS Grid 不是“自动启用”的布局模式，它需要明确的触发开关。Flexbox 同理，但 Grid 更严格：不设display，所有网格相关属性（grid-template-columns、grid-area、justify-self）全被浏览器忽略，连报错都不会有。
常见错误现象：
– 子元素写了 grid-row: 2 但始终在第一行
– grid-template-areas 定义了区域，grid-area却不起作用
– 开发者工具里能看到属性被划掉（strikethrough），但没意识到是父级缺失display
- 必须在直接父容器上设置
display: grid或display: inline-grid，嵌套层级不能跳过 - 如果父容器本身是 Flex 容器或绝对定位元素，需确认它是否仍能生成格式化上下文（一般可以，但
display: contents会破坏网格上下文） - 不要依赖“祖先元素用了
display: grid”来让后代生效——Grid 作用域只限于直系父子
列宽用 fr 比%更可靠，但 fr 不能和 px 混用时忽略最小内容宽度
fr单位本质是“剩余空间分配权”，不是百分比。它只在 grid-template-columns 或grid-template-rows中生效，且会尊重子元素的min-content（比如一段长单词、未折行的 URL）。这就导致一个典型翻车场景：你写grid-template-columns: 1fr 2fr，右边却窄得放不下文字，左边反而空出大片空白。
使用场景：
– 响应式侧边栏 + 主内容区（250px 1fr）
– 卡片栅格（repeat(auto-fit, minmax(300px, 1fr))))）
– 表单标签 + 输入框对齐（150px 1fr）
立即学习 “ 前端免费学习笔记（深入）”；
- 混用固定值（
px、em）和fr时，浏览器先预留固定宽度，再把剩余空间按比例分给fr项 -
minmax(200px, 1fr)比单纯1fr更能防挤压，尤其配合auto-fit做响应式 - 遇到文字溢出，优先检查
min-width: auto（默认值）是否被覆盖，而不是急着改fr数值
grid-area可以一次性定义位置，但命名区域必须和 grid-template-areas 完全匹配
用 grid-area: header 比写 grid-row: 1; grid-column: 1 / -1 简洁，但前提是父容器已通过 grid-template-areas 定义了 "header header header" 这类字符串。名字大小写、空格、引号类型（单 / 双）全部敏感；多行定义时换行符必须一致，不能用 续行。
常见错误现象：
– 控制台无报错，但元素跑到左上角（grid-area值被静默忽略）
– 某些区域显示错位，实际是 grid-template-areas 里某一行少写了一个词，导致列数对不上
-
grid-template-areas每行字符串的单词数量必须相等，否则整条声明失效（浏览器会丢弃该声明） - 空单元格用
.表示，不能留空格或写null、none - 动态生成模板字符串时（如 JS 拼接），注意换行符统一用
n，避免 Windows 的rn破坏解析
IE11 的 display: -ms-grid 和现代 grid 不兼容，不能共存写法
想兼容 IE11？别用 Autoprefixer 自动生成 -ms-grid 前缀——它只会复制现代语法，而 IE11 的 Grid 是另一套 API：没有 fr、没有grid-area、grid-column 对应-ms-grid-column，且起始 / 结束要用两个独立属性（-ms-grid-column + -ms-grid-column-span）。
性能影响：
– 同时写两套规则会让 CSS 体积增加 30% 以上
– 现代浏览器仍要解析并丢弃 IE 专用规则，虽不影响渲染，但浪费 CSSOM 构建时间
- 真要支持 IE11，建议用独立样式表 + 条件注释，或用
@supports (display: grid)包裹现代规则 - 避免在同一个选择器里混写
grid-column和-ms-grid-column，IE11 会因不认识前者而整个规则失效 -
gap在 IE11 完全不可用，需改用padding或margin模拟
Grid 真正的复杂点不在语法，而在它把“位置”“尺寸”“顺序”三件事解耦了：你可以用 grid-column 挪位置，用 order 调逻辑顺序，用 place-self 单独对齐——这三者叠加时，视觉结果未必符合直觉。调试时别只盯着开发者工具的 Layout 面板，得切到 Computed，逐项看 grid-row-start 这些最终计算值。
