最稳方案是display: grid配合repeat(auto-fit, minmax())；Flexbox因flex-shrink、换行计算偏差和高度不一致易致列宽错乱，而grid通过auto-fit折叠空轨道、minmax动态分配空间实现真正响应式等宽布局。
用 display: grid 配合 repeat(auto-fit, minmax()) 是目前最稳、最简、最不易翻车的方案。Flexbox 在图片等宽排列上容易因 flex-shrink、换行计算偏差或高度不一致导致列宽错乱，尤其在小屏临界尺寸下。
为什么 flex 布局常出问题？
常见错误现象包括：写了 width: 25% 却发现四张图在 768px 宽度下只排三列；某张图特别高，把整行撑开，相邻列宽度被“带歪”；缩放窗口时最后一张图突然独占一行，宽度暴涨。
根本原因有三个：
-
img默认是可收缩的替换元素，flex-shrink: 1会偷偷压缩它，哪怕你设了width: 25% - 浏览器按子项「内容宽度」（含边框、内边距）判断是否换行，不是按你写的百分比四舍五入
- 没有强制约束最小/最大宽度时，
flex-basis在不同容器尺寸下浮动，导致“等宽”只是假象
grid-template-columns: repeat(auto-fit, minmax()) 怎么写？
这是现代响应式图片网格的核心写法，不需要媒体查询就能自动适配列数。
立即学习“前端免费学习笔记（深入）”；
典型代码：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.75rem;
}
.gallery img {
width: 100%;
height: auto;
display: block;
}
关键点说明：
-
auto-fit比auto-fill更实用——它会折叠空轨道，让已有项目均分剩余空间，避免列被无意义压缩 -
minmax(200px, 1fr)表示：每列至少 200px，富余空间则按 1fr 等分；若容器宽 650px，就会生成 3 列（200×3=600），而不是 4 列挤成 162.5px -
gap替代margin，不影响列宽计算，且语义清晰
图片本身怎么控制才不破布局？
光靠容器不够，图片自身属性必须配合，否则 minmax() 的约束会被绕过。
- 务必加
width: 100%和height: auto，否则图片按原始尺寸渲染，可能溢出或拉伸 - 如果要统一高度（比如头像墙），给图片容器加
aspect-ratio: 1 / 1，再设object-fit: cover - 避免对
img直接设flex或max-width以外的尺寸属性，尤其是height固定值，会破坏aspect-ratio和响应逻辑 - IE11 不支持
auto-fit和aspect-ratio，需用@supports降级到display: flex+flex: 0 0 calc(33.333% - 4px)
真正难的不是写出那行 grid-template-columns，而是理解 minmax() 中的 1fr 是动态结果，不是固定像素——它随列数变化而变化，所以“等宽”是实时重算的，不是静态分配的。这点一旦忽略，调试时就会陷入反复调 width 和 flex-basis 的死循环。
