grid-template-columns: repeat(3, 1fr) 能实现真正等宽三栏，因1fr基于剩余空间均分，自动扣除gap、padding、border；而33.33%易超100%导致溢出。
直接写 grid-template-columns: repeat(3, 1fr) 就能生成视觉上真正等宽的三栏，前提是容器有明确宽度、没被 min-width 或内容撑破、且没混用固定单位。
为什么 repeat(3, 1fr) 比 repeat(3, 33.33%) 更可靠
百分比在 Grid 中不参与剩余空间再分配，一旦容器带 padding 或 border，33.33% × 3 很容易超 100%，触发横向滚动或布局错位。1fr 是弹性份额单位，浏览器会先扣除 gap、padding、border，再把剩余空间三等分——这才是“真均分”。
- 遇到父容器设了
padding: 20px，务必加box-sizing: border-box，否则总宽度可能溢出 - 如果某栏里放了未约束的长文本或大图，它可能把整行撑高，但列宽仍保持一致（
1fr不受内容尺寸影响） -
repeat(3, 1fr)在 IE11 完全无效，需用@supports not (display: grid)降级到 flex
三栏不等宽？先检查这几个地方
看似写了 repeat(3, 1fr) 却发现列宽不一，大概率是以下情况之一：
- 某个子项设置了
min-width（比如min-width: 300px），而容器总宽不足 900px，这时该列会优先满足最小宽，其他两列被迫压缩 - 用了
grid-auto-flow: column，导致网格按列填充而非默认的按行，破坏了“每行三栏”的预期结构 - 子项内嵌了
display: inline-block或浮动元素，造成基线对齐偏差，看起来像宽度不均（实际 computed width 是相等的） - 开发者工具里看到列宽数值不同？确认是否在看
width（含gap的视觉宽度）还是grid-column-end（逻辑列位置）
需要响应式怎么办：别硬切媒体查询
如果只是想让三栏在小屏变两栏、再小变单栏，repeat(auto-fit, minmax(300px, 1fr))) 比一堆 @media 更轻量、更健壮：
立即学习“前端免费学习笔记（深入）”；
- 它会在容器宽度 ≥ 300px 时尽可能多铺列，300px × 3 = 900px 以上就自动三栏；899px 就退成两栏；599px 就只剩一栏
- 不需要手动算断点，也不用担心内容卡片高度不一致导致错行——Grid 天然等高
- 注意别写成
auto-fill：它会预留空轨道，可能导致空白列；auto-fit会合并空轨道，更符合直觉 - 搭配
gap: 1rem安全添加间隙，gap不参与列宽计算，不会影响1fr分配
图片九宫格场景下特别要防的坑
当三栏里全是图片，repeat(3, 1fr) 只管列宽，不管图片变形。常见问题：
- 图片设了
width: 100%但父容器没设height，结果拉伸失真 → 改用object-fit: cover+height: 200px或grid-auto-rows: minmax(200px, auto) - 图片本身尺寸差异大，导致行高不统一 → 加
align-items: stretch（Grid 默认行为，一般不用显式写） - 用
img标签时忘了加display: block，底部留白 → 简单一行img { display: block; }解决
复杂点在于：1fr 看似简单，但它依赖整个布局链的干净——父宽、子项约束、盒模型、甚至图片加载时机都可能悄悄破坏“等宽”表象。动手前先打开开发者工具，盯着 computed 的 width 和 grid-column 看两眼，比猜半天快得多。
