用 fr 单位可直接等分列宽，如 1fr 1fr 1fr 或 repeat(3, 1fr)，但需容器有明确宽度；内容溢出时应配合 minmax(200px, 1fr) 保底；gap 不影响列宽计算，IE 不支持需 fallback。
grid-template-columns 用 fr 单位直接等分列宽
要让多列自动等宽，最直接的方式是用 fr（fraction）单位。它不是像素或百分比，而是“剩余空间的份数”，只要所有列用相同数量的 fr，浏览器就会均分可用宽度。
比如三列等宽：grid-template-columns: 1fr 1fr 1fr；四列就是 1fr 1fr 1fr 1fr。也可以简写为 repeat(4, 1fr)，更清晰且易维护。
- 避免混用
fr和固定值（如200px），否则等分逻辑会被破坏 -
fr不受内容撑开影响——即使某列内容很长，只要没设min-width或overflow，它仍会和其他列保持视觉等宽 - 注意容器必须有明确宽度（比如
width: 100%或父容器设了display: grid），否则fr无基准可依
处理内容溢出或最小宽度干扰时加 minmax()
真实场景中，文字过长、图片未约束、或需要保底宽度，会导致列“看起来不等宽”。这时不能只靠 1fr，得用 minmax() 控制弹性下限。
例如希望三列等宽但每列至少 200px：grid-template-columns: repeat(3, minmax(200px, 1fr)))。这样在宽屏下三列均分，窄屏下先缩到 200px，再触发换行或滚动。
立即学习“前端免费学习笔记（深入）”；
-
minmax(min, max)中的max写1fr才能参与等分；写max-content或auto就会失去等宽特性 - 如果某列需固定宽度（如操作栏），其他列想等宽，可写成：
200px repeat(2, 1fr)，此时后两列平分剩余空间 - 慎用
min-width: 0强制截断——它会影响fr计算，仅在子项内联元素溢出时作为兜底
gap 会影响视觉等宽感，但不改变列宽计算
gap 是网格间隙，它插入在列与列之间，**不占用列宽**，但会让整体布局显得“列变窄”或“不对齐”。尤其当容器有 padding 时，容易误判是否真等宽。
- 检查是否真等宽：用浏览器开发者工具选中每个
grid-column，看 computed width 是否一致（排除 gap 和 border 影响） - 若希望“内容区等宽”，而 gap 固定，则无需调整；若希望“包含 gap 的总宽度均分”，就得手动算：比如三列 + 两处 gap，每列宽度 =
(100% - 2 * gap) / 3，此时改用calc()配合px更稳妥 -
gap在 flex 布局里没有等价物，这是 grid 的优势，别因视觉错觉放弃它
IE 不支持 fr 和 repeat，需要 fallback 方案
如果项目还需兼容 IE11，1fr 和 repeat() 全部失效。此时只能退到 display: flex 或用 Float + 百分比模拟，但无法真正“等宽”（百分比在小数精度下会累计误差）。
- 现代项目建议直接忽略 IE，或用 @supports 检测：
@supports (display: grid) and (grid-template-columns: 1fr) - 若必须兼容，可用
grid-template-columns: 33.33% 33.33% 33.34%+box-sizing: border-box，但响应式下极易崩坏 - 真正麻烦的不是写法，而是
fr背后依赖的 layout algorithm —— IE 的 grid 实现是阉割版，连auto-fit都不认
实际中最容易被忽略的是容器宽度来源和子项的 min-width 默认行为。很多“等宽失效”问题，根源不在 grid 写法，而在父级没设 width，或子元素是图片/表格/内联块，悄悄撑开了列。