fr是剩余可用空间的等分份额，先扣除固定尺寸再按比例分配；常见问题源于内容撑开、未设minmax()或min-width:0；响应式推荐auto-fit+minmax()；IE11不支持fr需降级处理。
fr单位到底怎么分配剩余空间
fr 不是固定像素，也不是百分比，它是“剩余可用空间的等分份额”。比如 grid-template-columns: 1fr 2fr，不是说第二列一定是第一列的两倍宽，而是：浏览器先减去所有固定尺寸（如 gap、显式设宽的列、内容固有宽度），再把剩下的空间按 1:2 切分。
常见错误现象：fr 列被内容撑开、列宽不均、小屏下溢出
原因往往是没控制好内容最大宽度或没设 minmax() 限制
- 如果某列放图片或长文本，它可能突破
fr分配，除非加min-width: 0或overflow: hidden -
fr在嵌套 Grid 中仍有效，但外层容器若未设width或max-width，响应行为会不可控 - 不要混用
fr和%，比如1fr 50%—— 百分比基于容器宽度计算，fr基于剩余空间，结果难预测
如何让Grid列在小屏变单列而不写媒体查询
靠 minmax() + auto-fit 组合，本质是让 Grid 自动“折叠”列数。
典型写法：grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
意思是：每列最小 300px，最大占满剩余空间，尽可能多放列；放不下时自动减少列数，最终剩一列时就是 100% 宽
使用场景：卡片列表、产品展示、仪表盘小组件
容易踩的坑：
- 忘了给子元素设
min-width: 0，导致minmax()失效（尤其内部有 flex 或长文本） - 用
auto-fill而非auto-fit：前者预留空列，后者只渲染实际需要的列，更符合响应预期 -
300px是硬编码断点，实际应结合设计稿最小卡片宽度，而非随意填
gap和border/margin对fr计算的影响
gap 从总空间中扣除，参与 fr 计算；而 border 和 margin 不扣除，它们是在列宽确定后再叠加的。
这会导致两个问题：
立即学习“前端免费学习笔记（深入）”；
- 设了
gap: 20px后，两列1fr 1fr实际各占 “(容器宽 - 20px) / 2”，不是容器宽的一半 - 如果列内元素有
margin，又没设box-sizing: border-box，可能触发横向滚动条，尤其在移动端
性能影响很小，但兼容性要注意：
-
gap在 Firefox 旧版、Safari 14.1 之前需加-webkit-gap -
border和padding建议统一用box-sizing: border-box，否则fr分配后内容还会往外撑
IE不支持fr？那怎么办
IE10/11 完全不识别 fr 单位，遇到就直接忽略整条 grid-template-columns 声明，退回到浏览器默认布局（通常是块级堆叠）。
不能靠 @supports (display: grid) 检测，因为 IE 支持 display: grid 但不支持 fr。
可行方案只有两个：
- 用
display: flex+flex: 1模拟，但无法实现二维布局（比如跨行对齐） - 用 CSS 容器查询（
@container）或 JS 检测gridTemplateColumns是否生效，再动态降级 —— 但 IE 连@container都不支持，最终只能靠 UA 判断或功能检测库
真正麻烦的不是写法，是当设计要求“三栏等宽+自适应+IE11兼容”时，fr 必须整个放弃，改用 calc() + 媒体查询硬编码，或者接受降级为单列。
响应式 Grid 的核心不在“怎么写”，而在“哪些地方必须让步”。fr 看似简单，但它把布局决策权交给了浏览器——而浏览器是否真能理解你的意图，取决于你有没有掐住内容、间隙、盒模型这三个开关。
