fr代表剩余可用空间的等分份额，先扣除固定尺寸和gap，再按比例分配；minmax中最小值不足时失效，IE11需用-ms-grid-columns降级。
fr单位到底怎么算，为什么设1fr 2fr没占满容器
fr不是像素，也不是百分比，它代表“剩余可用空间的等分份额”。关键在“剩余”二字——所有带固定尺寸（px、em、minmax(200px, 1fr)里的最小值）的列先占位，剩下的空间才按fr比例分。
- 如果某列写了
minmax(300px, 1fr)，而容器宽仅250px，那它会收缩到250px（低于最小值时失效），但不会触发fr分配逻辑 -
1fr 1fr 1fr≠ 等宽三列：当存在gap: 20px时，gap也从总宽里扣除，fr只分剩下的部分 - 避免混用
fr和%：比如50% 1fr，浏览器会先按50%占位，再把剩余空间全给1fr——但50%是相对于容器宽，而fr是相对于剩余空间，语义冲突易出错
grid-template-columns里写repeat(auto-fit, minmax(300px, 1fr)))为啥不生效
这个写法本身没问题，但常见失效原因是父容器没设宽度，或被flex/float等上下文干扰了尺寸计算。auto-fit依赖父容器有明确的可用宽度才能触发重排。
- 检查父元素是否设置了
width或max-width，或者是否被display: inline之类限制了块级行为 -
auto-fit和auto-fill区别很实在：auto-fill会渲染所有可能列（哪怕空着），auto-fit则会把空列合并掉——但前提是容器有足够宽度让网格引擎“看到”这些列 - 移动端调试时，记得关掉开发者工具的“设备模拟”缩放，否则视口宽度误判会导致
minmax始终取最大值
IE11不支持fr，但项目必须兼容，怎么降级
别试图polyfill fr，CSS Grid在IE中本身就是部分实现，fr完全不识别。得换思路：用display: -ms-grid配-ms-grid-columns，但只能用px、fr（IE的fr是字面意义的“fraction”，且不支持minmax）或auto。
- IE专用语法里
-ms-grid-columns: 1fr 2fr能用，但minmax()、auto-fit、gap全不支持，必须拆成媒体查询+固定列数 - 推荐方案：用
@supports not (display: grid)包裹Flex降级样式，比硬啃-ms-grid更可控 - 注意
gap在IE中无效，得用margin模拟，但要小心父子margin折叠问题
用fr布局时，内容溢出导致横向滚动，怎么破
fr分配的是空间，不是约束。如果某格里塞了个width: 500px的图片，而该格按fr只分到300px，就会溢出。
- 给网格项加
min-width: 0（或overflow: hidden），强制内容尊重格子边界——这是最常漏掉的一行CSS - 避免在
grid-template-columns里写死1fr 1fr后，在子元素里又设width: 100%：百分比是相对于父容器，而父容器宽由fr动态定，容易套娃失控 - 调试时用
outline: 1px solid red快速看格子实际占位，比devtools高亮更准——因为后者有时会把gap也算进尺寸
fr的弹性藏在“剩余空间”四个字里，但人眼看不到“剩余”，只能靠删掉固定尺寸、关掉gap、清空内容一步步反推。越想一步到位，越容易卡在某个看不见的min-width上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
