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的\r\n破坏解析
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这些最终计算值。
