CSS Grid 的 1fr 始终基于整个容器宽度计算，无法让最后一行子项自动均分该行可用宽度；真正能实现“每行独立均分、末行撑满”的是 Flexbox 的 flex-wrap: wrap + flex: 1 组合。
css grid 的 `1fr` 始终基于整个容器宽度计算，无法让最后一行子项自动均分该行可用宽度；真正能实现“每行独立均分、末行撑满”的是 flexbox 的 `flex-wrap: wrap` + `flex: 1` 组合。
在响应式多列布局中，一个常见但极易被误解的需求是：让子项按最小宽度（如 minmax(100px, 1fr)）自动换行，并确保每一行（尤其是最后一行）的子项能均分该行可用宽度，视觉上从左到右铺满整行、居中对齐。例如屏幕缩小时，Nine 和 Ten 落入新行，期望它们各占 50% 宽度并水平居中——而非各自仅占 1fr（即全容器宽度的 1/2），导致严重错位。
遗憾的是，纯 CSS Grid 无法原生满足这一需求。原因在于其核心设计机制：
-
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)))中的1fr永远相对于整个网格容器宽度计算，而非当前隐式行的剩余宽度； - 当子项换行生成新隐式行时，Grid 并不为该行重新计算
1fr的基准——因此单个子项仍会占据100%容器宽（若仅设1fr），两个子项则各占50%容器宽，与所在行的实际宽度无关； -
justify-items: stretch或justify-content: space-around等属性仅控制单个轨道内子项对齐，无法动态调整跨行的分配逻辑。
✅ 正确解法：改用 Flexbox
Flexbox 天然具备“每行独立主轴上下文”的能力。启用 flex-wrap: wrap 后，浏览器会为每一行创建独立的主轴容器，此时 flex: 1（等价于 flex: 1 1 0）将使子项基于该行可用宽度进行均分，完美匹配需求：
.container {
display: flex;
flex-wrap: wrap;
gap: 12px; /* 推荐使用 gap，避免 margin 破坏计算 */
}
.container > div {
flex: 1; /* 关键：每行内均分剩余空间 */
min-width: 100px; /* 保证最小宽度约束 */
text-align: center;
padding: 0.75em 1.5em;
box-sizing: border-box;
}⚠️ 注意事项：
- 禁用
margin模拟间隙：gap是 Flexbox 原生间隙属性，不侵占子项内容宽度；若用margin: 6px，则子项实际可用宽度 =(行宽 - 2×6px×2) / 子项数，会破坏min-width与均分逻辑；flex: 1隐含flex-basis: 0：这是实现“无视原始内容宽度、纯粹按比例分配”的关键，避免长文本或图片撑破布局；- 兼容性兜底：现代浏览器（Chrome 29+, Firefox 28+, Safari 6.1+, Edge 12+）全面支持；如需支持 IE11，可降级为
flex: 1; min-width: 100px;并配合媒体查询。
? 进阶优化（防内容溢出）
即使布局均分，长 URL、无空格文本或未约束图片仍会导致子项突破宽度。建议统一防御：
.container > div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.container > div img {
width: 100%;
height: auto;
display: block;
}总结：Grid 擅长二维结构化布局（如仪表盘、表单网格），而一维流式均分 + 自动换行场景，Flexbox 才是语义正确、行为可靠的技术选型。理解 1fr 的作用域边界，是避免布局“看似合理却失效”的关键认知分水岭。
立即学习“前端免费学习笔记（深入）”；
