混用fr和%时，浏览器先按百分比固定列宽，再将剩余空间按fr比例分配；例如20% 1fr 2fr中，后两列实际占容器宽约26.67%和53.33%。
fr单位和百分比在grid-template-columns里混用会怎样
混用 fr 和 % 是合法的，但行为容易误解：浏览器先按百分比固定列宽，再把剩余空间分给 fr 列。比如 grid-template-columns: 20% 1fr 2fr 中，第一列占容器宽的 20%，剩下 80% 才被按 1:2 分成两列（即约 26.67% 和 53.33% 容器宽）。
常见错误是以为 1fr 等价于 100% 或自动撑满——它只代表“剩余空间的等份”，不考虑其他列是否用了百分比。
- 百分比列基于容器宽度计算，不受内容影响；
fr列基于剩余可用空间，受其他列尺寸约束 - 若某列设为
minmax(200px, 1fr)，又同时存在30%列，那fr部分可能被压缩到小于200px（除非设置min-width或用minmax()保护） - 响应式断点中，建议统一用
fr或统一用%，避免逻辑跳跃；真要混用，优先用fr控制弹性部分，%仅用于严格比例控制（如侧边栏固定占比）
用fr实现等宽自适应列但限制最小宽度
纯 1fr 1fr 1fr 在小屏下会让列过窄。必须配合 minmax() 给每列设底线。
grid-template-columns: repeat(3, minmax(240px, 1fr)));
这表示：最多显示 3 列，每列至少 240px，超出部分均分剩余空间。当容器宽度 auto-fit + repeat() 的收缩逻辑（需配合 grid-auto-flow: column 或媒体查询处理）。
立即学习“前端免费学习笔记（深入）”；
-
minmax(240px, 1fr)中的1fr不是“尽可能大”，而是“尽可能平均分配剩余空间”，上限由容器减去其他轨道后决定 - 想让列数随屏幕变化？改用
repeat(auto-fit, minmax(240px, 1fr)))，并确保父容器有明确宽度（非fit-content） - 注意 Safari 旧版本对
auto-fit支持不稳定，生产环境建议加@supports (display: grid)检测
百分比列在grid布局中为什么经常“不准”
因为 % 在 Grid 中的基准是**网格容器的内联尺寸（inline size）**，也就是 width（水平书写模式下）。但它不等于“容器 content-box 宽度”——如果容器有 padding、border，而你没设 box-sizing: border-box，那 50% 就会超出预期。
- 更隐蔽的问题：当 grid 容器是
display: inline-grid且父元素是文本流时，它的宽度由内容撑开，此时50%是相对于那个动态宽度，而非视口 - 嵌套 Grid 中，子网格的百分比是相对于其直接父网格项（grid item）的尺寸，不是最外层容器——这点和 Flexbox 不同，容易误判
- 替代方案：用
fr替代简单百分比（如1fr 1fr≈50% 50%），语义更清晰且不受 box model 干扰
移动端适配时fr与媒体查询怎么配合才不冲突
直接在媒体查询里改 grid-template-columns 是最稳妥的做法。别试图靠 fr 自己“感知”断点——它没有响应能力，只是分配算法。
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
}
@media (min-width: 769px) {
.grid {
grid-template-columns: 2fr 1fr;
}
}关键点在于：不要在同一个规则里混写多套 grid-template-columns，CSS 不支持条件表达式。必须用媒体查询显式切换。
- 如果用 JS 动态写
style.gridTemplateColumns，记得每次都要覆盖整个值，不能只改某一项 -
fr的数值本身无单位，所以2fr和20fr效果一致（只看比例），但写成2fr 1fr比20fr 10fr更易读、易维护 - 复杂布局建议抽离为 CSS 自定义属性，例如
--sidebar-ratio: 1; --main-ratio: 3;，然后用calc(var(--sidebar-ratio) * 1fr) calc(var(--main-ratio) * 1fr)，便于 JS 或媒体查询统一调控
实际项目中最容易被忽略的是：grid 容器的 width 是否真正受限（比如父级是 display: flex 且没设 flex-basis），否则所有 fr 和 % 都会基于一个意外的基准计算。
