fr单位按剩余空间分配而非等分屏幕，受box-sizing、padding、滚动条等影响；响应式需结合minmax()、grid-template-areas及flex降级方案。
Grid里fr单位不是“等分屏幕”，而是按剩余空间分配
很多人一写grid-template-columns: 200px 1fr就以为右边自动占满剩余宽度，结果在嵌套容器或有padding/border的父元素里布局错位。根本原因是fr只对grid container的内容区宽度生效，不自动扣除内边距或滚动条宽度。
实操建议：
-
fr计算前，确保父容器设置了box-sizing: border-box，否则padding会挤占可用空间 - 侧边栏固定宽如
200px，主内容用1fr，但若侧边栏要响应式收缩（比如小屏隐藏），不能只靠fr，得配合@media切换grid-template-columns - 移动端常需让侧边栏叠在主内容上方，此时
fr失效——得改用grid-template-areas重排区域顺序，而不是硬调列宽
用minmax() + fr防侧边栏被压缩到看不见
纯200px 1fr在窄屏下会导致侧边栏文字换行、图标错位，甚至overflow。直接设min-width: 200px也不行——Grid不会尊重子元素的min-width，它只看grid-template-columns定义。
正确解法是把固定列改成弹性范围：
立即学习“前端免费学习笔记（深入）”；
grid-template-columns: minmax(200px, 250px) 1fr;
这样既保底200px，又允许在宽屏适度撑开提升可读性。注意：minmax()里的最大值别设死（比如200px），否则失去弹性；也别用%，它和fr混用容易触发循环计算。
- 如果侧边栏含导航菜单，建议最大值设为
280px——足够放两行中文+图标+箭头 - 不要对
1fr列再套minmax()，除非你真需要主内容最小宽度限制，否则反而破坏响应性 - 某些旧版Safari对
minmax()支持不稳定，如需兼容iOS 13以下，降级用fit-content(200px)替代
侧边栏高度不随视口滚动？检查grid-container是否被截断
常见现象：侧边栏在长页面中只显示一屏高，往下滚动后空白。这不是fr的问题，而是grid container本身高度没撑开——比如父元素用了height: 100vh但没设min-height，或者body有默认margin导致布局塌陷。
关键检查点：
- 给
grid container加min-height: 100vh，而非height: 100vh - 确认
html和body都设了height: 100%且无margin - 如果侧边栏需固定定位（比如始终可见），别用
position: sticky塞进Grid——Grid的sticky行为在Firefox和Safari中差异大；改用position: fixed+ 手动计算left值，再用margin-left推开主内容
IE11不支持fr？别硬扛，用display: flex降级更稳
IE11完全不识别fr单位，连1fr都会被整条忽略，退化成单列。这时候强行加@supports检测意义不大——因为IE11也不支持@supports。真正能落地的方案是双写布局：
display: flex;<br>display: grid;
利用CSS解析规则：IE11读到display: grid会跳过整条声明，继续用上面的flex；现代浏览器则覆盖为grid。Flex方案只需两行：
flex-direction: row;<br>flex: 0 0 200px; /* 侧边栏 */<br>flex: 1; /* 主内容 */
- Flex降级时，
flex-basis设200px比width更可靠，避免IE11盒模型bug - 别用
flex: 1 1 200px，IE11对第二个1（flex-shrink）解析异常，固定写flex: 0 0 200px - 如果项目已用Grid特性如
grid-area，降级时必须同步提供order属性控制视觉顺序，否则小屏下侧边栏会跑到主内容后面
实际项目里最易忽略的是fr和scrollbar的博弈——当右侧内容溢出，滚动条出现，1fr的宽度会瞬间变窄，导致侧边栏“抖动”。解决它得在body加overflow-y: scroll强制预留滚动条空间，而不是等它动态出现。
