直接写grid-template-columns: repeat(3, 1fr)即可实现真正等宽三栏，浏览器先扣除gap、padding、border再均分剩余空间；而33.33%易因叠加边距超100%导致溢出，且受min-width、grid-auto-flow: column、内联元素基线偏差等影响出现视觉不等宽。
直接写 grid-template-columns: repeat(3, 1fr) 就行
这是最简、最稳的写法，不需要算百分比，也不用担心小数精度误差。浏览器会先扣除 gap、padding 和 border，再把剩余空间三等分——这才是真正视觉等宽。
常见错误现象：
- 写了
33.33%却出现横向滚动条：因为百分比不参与剩余空间再分配，padding: 20px+3 × 33.33%很容易超 100% - 列宽看起来不一致：其实是某子项设了
min-width: 300px，而容器总宽不足 900px，该列优先撑开，其他两列被压缩 - 开发者工具里看到列宽数值不同：确认你查的是
width（含 gap 的视觉宽度）还是grid-column-end（逻辑列位置）
repeat(3, 1fr) 失效的几个典型原因
它不是万能的，以下情况会导致“写了但没效果”：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 父容器没设明确宽度（比如
width: 100%或嵌套在 flex/grid 容器中），1fr就失去计算基准 - 混用了固定单位，例如
grid-template-columns: 200px 1fr 1fr—— 这时后两列才等宽，第一列是固定的 - 启用了
grid-auto-flow: column，网格按列填充，破坏了“每行三栏”的预期结构 - 子项内有未约束的
inline-block或浮动元素，造成基线对齐偏差，看起来像宽度不均（实际 computed width 是相等的） - IE11 完全不支持
1fr和repeat()，需用@supports not (display: grid)降级到 flex
响应式三栏怎么写？别手写 @media
想小屏变两栏、再小变单栏？用 repeat(auto-fit, minmax(300px, 1fr))) 更轻量：
- 容器 ≥ 900px → 自动铺满三栏
- 899px → 退成两栏（
auto-fit合并空轨道，不会留白） - 599px → 只剩一栏
- 不用手动算断点，也不怕卡片高度不一致导致错行——Grid 天然等高
- 别误写成
auto-fill：它会预留空轨道，可能产生空白列
图片或长文本导致列“撑高”或“变形”，怎么办？
repeat(3, 1fr) 只管列宽，不管内容渲染行为。真实场景中容易踩坑：
- 图片设了
width: 100%但父容器没设height→ 拉伸失真 → 改用object-fit: cover+ 显式height，或配grid-auto-rows: minmax(200px, auto) - 长文本溢出撑破列宽 → 子项加
min-width: 0（仅当内容为内联文本或未设white-space时需要） - 想让“包含 gap 的总宽度”也均分 →
1fr不适用，得手动算：calc((100% - 2 * 1rem) / 3)，此时用px或rem更可控
真正麻烦的不是写法，而是忘了检查容器是否设了 box-sizing: border-box —— 父容器带 padding 却没设这个，总宽度就容易悄悄溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
