fr单位按剩余空间分配比例，需先扣除内容、gap等占用空间；minmax(0,1fr)防撑爆；IE不支持；响应式推荐auto-fit+minmax；gap不跨层；命名线比数字线更可靠。
fr单位到底怎么算，不是“等分”那么简单
fr单位不是把容器宽度平均切块，而是按剩余可用空间分配比例。比如 grid-template-columns: 1fr 2fr，第二列占剩余空间的2/3，但前提是所有列都没设置固定尺寸或最小内容宽（min-content）挤压。
- 如果第一列里塞了个
min-width: 300px的图片，而容器总宽才 400px，那1fr实际可能被压缩到接近 100px，2fr也只剩约 200px —— fr 是“减去已占用空间后”的再分配 - 用
minmax(0, 1fr)可以防止内容撑爆列（尤其文本长单词、未折行的 URL），否则默认min-width: auto会强制列至少容纳最长子项 - IE 不支持
fr，哪怕写成display: -ms-grid也只认像素/百分比，别指望兼容
响应式断点里，别直接改 grid-template-columns
用媒体查询反复重写整条 grid-template-columns 容易漏掉某一层，也难维护。更稳的方式是结合 repeat() 和 minmax() + auto-fit，让网格自己“数格子”。
- 写成
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))：浏览器会尽可能放满 300px 宽的列，不够就自动减少列数，且每列都弹性伸缩 -
auto-fit会合并空轨道，auto-fill则保留空位，响应式布局几乎都该选auto-fit - 别在媒体查询里写
repeat(4, 1fr)→repeat(2, 1fr)这种硬编码，设备宽度微调时容易出现“多一列挤不进、少一列又留白”的卡顿感
gap 在 flex 和 grid 里行为不一致，别混着试
gap 在 Grid 中作用于所有轨道间隙（行与行、列与列），但在 Flex 布局中只控制主轴（row-gap/column-gap 需单独设，且旧版 Safari 对 flex gap 支持差）。
- Grid 中
gap: 1rem等价于row-gap: 1rem; column-gap: 1rem；Flex 中它可能被忽略，得拆开写 - 如果父容器是 Grid，子项又用了 Flex，子项内部的
gap不会影响父 Grid 的轨道计算 —— gap 不跨层传递 - 避免给 Grid 容器同时设
gap和子项margin，容易双倍间距，调试时用浏览器开发者工具的 Layout 面板看实际 gap 区域最准
用 grid-column 跨列时，别假设起始线编号永远是 1
显式定义了 grid-template-columns 才有确定的列线编号；没定义时，浏览器按内容自动创建隐式网格线，编号不可靠，尤其加了 gap 或子项有 grid-column-start 后更难预测。
立即学习“前端免费学习笔记（深入）”；
- 优先用命名线：
grid-template-columns: [main-start] 1fr [content] 2fr [main-end]，然后子项写grid-column: main-start / main-end，可读性高且抗变化 - 用
span 2比写死/ 3更安全，比如grid-column: 2 / span 2表示从第 2 条线开始跨 2 格，不依赖终点线是否存在 - 当网格嵌套或有
grid-auto-flow: dense时，线号可能跳变，此时绝对编号极易出错
fr 单位看着简单，但真正卡住人的从来不是语法，而是“剩余空间”到底剩多少——它随时被内容尺寸、gap、minmax 下限、隐式轨道一起动态吃掉。调布局时，先关掉所有内容，用纯色块占位，把 grid outline 打开，再一点点加真实元素，比对着设计稿硬调快得多。
