用 fr 单位配合 minmax() 可有效解决 CSS Grid 列宽不均问题，关键在于避免固定像素值干扰自动分配逻辑，并为每列设置合理的弹性范围。
用 fr 单位配合 minmax() 可以有效解决 CSS Grid 中列宽不均的问题，关键在于避免固定像素值干扰自动分配逻辑，同时为每列设置合理的弹性范围。
用 fr 替代固定宽度定义列
fr（fraction）是 Grid 专属单位，代表“可用空间的等分份额”。相比 px、% 或 em，它能根据容器剩余空间动态伸缩，天然支持均衡分布。
- ❌ 错误写法：
grid-template-columns: 200px 300px 150px;—— 列宽完全固定，无法响应内容或容器变化 - ✅ 推荐写法：
grid-template-columns: 1fr 1fr 1fr;—— 三列平分容器宽度 - ✅ 灵活比例：
grid-template-columns: 2fr 1fr 1fr;—— 第一列占一半，后两列各占四分之一
用 minmax() 设置列的弹性边界
纯 fr 在内容极短或极长时可能失衡（如空列塌陷、长文本撑破布局）。minmax(min, max) 能为每列设定最小和最大限制，让 fr 在安全范围内工作。
- 常见组合：
minmax(200px, 1fr)表示“至少 200px，最多不超过按fr计算出的份额” - 实用示例：
grid-template-columns: repeat(3, minmax(250px, 1fr)));—— 三列最小 250px，超出部分均分剩余空间 - 兼顾响应式：
minmax(min(250px, 100%), 1fr)可在小屏下优先保证最小宽度不超屏
避免隐式干扰：检查 grid-auto-columns 和内容溢出
即使显式设置了 grid-template-columns，若子项内联样式含 width、min-width，或未处理文本换行，仍会导致视觉不均。
立即学习“前端免费学习笔记（深入）”；
- 清除子项干扰：
grid-column: span 1;+min-width: 0;（防止 flex/grid 子项默认最小宽度撑开） - 控制文本换行：
word-break: break-word;或overflow-wrap: break-word; - 禁用隐式列扩张：
grid-auto-columns: none;防止额外列被自动创建并占用空间
调试技巧：用 outline 可视化网格线
快速验证是否真不均，而非视觉错觉：
- 临时加到 grid 容器：
outline: 1px solid red; - 给直接子项加：
outline: 1px dashed #666;查看实际占据区域 - 浏览器开发者工具中勾选 “Show grid line numbers” 或 “Highlight grid tracks” 辅助定位
不复杂但容易忽略。核心就两点：用 fr 让列主动协商空间，用 minmax() 给协商划好底线和上限。
