Grid布局中侧边栏固定宽度+主内容自适应最稳方案是grid-template-columns: 240px 1fr；头部高度需显式声明grid-template-rows；gap不继承，子容器须单独设置；IE11禁用fr和subgrid。
侧边栏固定宽度 + 主内容自适应，用 grid-template-columns 最稳
Grid 布局里最容易翻车的，就是侧边栏“看着固定了，一缩放就错位”。根本原因不是没设 width，而是没切断主内容对侧边栏尺寸的依赖。正确做法是直接在容器上用 grid-template-columns 定义列轨道。
-
grid-template-columns: 240px 1fr;—— 左侧硬编码像素值，右侧用1fr吃满剩余空间，不依赖内容撑开 - 避免写成
grid-template-columns: minmax(240px, 240px) 1fr;，多余且易触发 Safari 的渲染 bug - 如果侧边栏需要响应式收起，别用
display: none切换，改用grid-template-columns: 0 1fr;+overflow: hidden，保持 DOM 结构和焦点流稳定
头部高度不一致？grid-template-rows 必须显式声明
后台面板顶部导航栏常因字体、行高或内边距微小差异导致高度浮动，Grid 容器若只靠 auto 行高，不同浏览器渲染结果可能差 1–2px，进而影响下方区域对齐。这不是 bug，是 Grid 对 auto 的计算逻辑本就宽松。
- 写死高度最可靠：
grid-template-rows: 64px 1fr;（64px 是常见头部高度，按实际调整） - 如果头部内容高度不确定，用
minmax(64px, max-content)替代auto，既保底又防溢出 - 千万别让
header元素自己设height，Grid 容器的grid-template-rows才是唯一权威尺寸来源
多组件嵌套时，子容器 display: grid 会继承父级 gap？不会，但容易误判
很多人以为给父容器设了 gap: 16px，子组件内部的 Grid 就自动带间隙，其实完全无关——gap 不继承，也不传递。真正踩坑的是：子组件用了 grid，却忘了重设自己的 gap 或轨道，导致视觉上“组件挤在一起”。
- 每个需要间隙的 Grid 容器，都必须单独声明
gap，例如：.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } - 若子组件是卡片列表，且卡片自身有
margin，立刻删掉——gap和margin叠加会导致双倍间距 - Firefox 对
gap在嵌套 Grid 中的解析更严格，Chrome 偶尔“宽容”反而掩盖问题
IE11 兼容性断点在哪？别碰 fr 单位和 subgrid
真要兼容 IE11，Grid 就得退回到第一版规范（2017 年前），很多现代写法直接失效。不是“加个前缀就能跑”，而是语法层就不识别。
立即学习“前端免费学习笔记（深入）”；
- 禁用所有
fr单位，改用flex或百分比 +calc()模拟；例如1fr→calc(100% - 240px) -
grid-template-areas在 IE11 中支持极差，命名区域几乎不可靠，优先用线性数字索引：grid-column: 2 / 4; - 绝对不要用
subgrid（连 Chrome 都刚支持不久），IE11 会直接忽略整个display: grid声明，降级成块级元素堆叠
Grid 布局的复杂性不在语法多难，而在“谁控制尺寸”这个权力归属——容器定义轨道，子项只负责落格。一旦让子项反向影响轨道（比如用 min-width 撑开列），或者混用 flex 和 grid 的尺寸逻辑，后面所有对齐、响应式、滚动行为都会开始飘。
