fr 是剩余空间的份数，如 1fr 2fr 1fr 将剩余空间分为4份；混用 fr 与 px 时 fr 仅分配扣除 px 后的剩余空间；需用 minmax() 或 clamp() 防布局崩溃，设 min-width: 0 防内容撑宽，并注意 auto 不拉伸、align-self 才控制子项填满。
fr 单位到底怎么分配剩余空间
fr 不是固定像素，而是“可用剩余空间的份数”。比如 grid-template-columns: 1fr 2fr 1fr，容器宽度减去所有确定尺寸（如 px、%、auto）占用后，剩下的空间被分成 4 份，三列分别占 1、2、1 份。
常见错误是混用 fr 和 px 后发现列宽“不对劲”——其实是 fr 只分剩余空间，不包含 px 列本身。例如：grid-template-columns: 200px 1fr 1fr，若容器宽 800px，则两个 1fr 共享 600px，各得 300px。
- 多个
fr相加为 0？浏览器会报错或退化为auto -
minmax(100px, 1fr)是安全写法：至少 100px，有余量再按份数扩 -
1fr和1fr 1fr在同一容器中效果不同——前者占全部剩余，后者平分剩余
px、%、auto、fit-content 怎么选
固定列宽用 px 最直观；但响应式场景下，% 易受父容器 padding 或 box-sizing 影响，不如 fr 可靠。auto 会让列宽由内容撑开，适合按钮、标签等短内容；fit-content(200px) 表示“最多 200px，内容少就缩”，比纯 max-content 更可控。
行高同理：grid-template-rows: 40px 1fr auto 中，第一行死定 40px，第二行填剩余，第三行随内容高度自适应。
立即学习“前端免费学习笔记（深入）”；
