最常用解法是grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))，它使网格项等宽而非图片等高；图片等高需配合aspect-ratio或object-fit控制img自身渲染。
用 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) 是最常用解法
这不是“让图片等宽等高”的最终答案，而是让**容器网格项等宽**的起点。图片本身是否等高，取决于你是否强制约束其尺寸或使用 object-fit。常见错误是只写 1fr 却没配 minmax()，结果在小屏下网格项被压缩成一条线。
-
auto-fill会尽可能多地填满可用空间，即使没有足够子元素也会留空格；auto-fit则会把空列合并，更适合图片数量不确定的场景 -
minmax(200px, 1fr)表示：每列最小 200px，最大均分剩余空间。别直接写1fr 1fr 1fr——那会固定列数，响应性就没了 - 如果图片原始宽高比不一致，仅靠 Grid 不会让它们“视觉上等高”，必须配合
aspect-ratio或固定height+object-fit: cover
图片真正等高必须控制 img 元素自身行为
Grid 只管布局容器，不管内部内容怎么渲染。如果你发现网格项高度参差不齐，大概率是 img 拉伸或溢出导致的。这时候不能只调 Grid，得动图片本身。
- 给
img设width: 100%; height: 100%; object-fit: cover;，确保它填满网格项且不扭曲 - 更稳妥的方式是给网格项（比如
article或figure）加aspect-ratio: 1 / 1;，再让img继承该尺寸，这样无论图片原始比例如何，显示区域都是正方形 - 注意
aspect-ratio在 Safari 15.4+ 和 Chrome 88+ 支持良好，旧浏览器需回退到 padding-top 百分比 hack（但没必要为老版本牺牲现代写法）
避免 fr 单位在嵌套 Grid 中意外拉伸
当你在一个已有 Grid 容器里再套一层 Grid（比如卡片内部分栏），1fr 的计算基准会变成父级网格项的内容区，而不是整个视口。这容易导致子网格列宽远小于预期。
- 调试时检查浏览器开发者工具里每个网格项的
grid-column-start/end和实际渲染宽度，确认是否真被分配了等份 - 若父容器有
padding或border，而子网格用了width: 100%，可能触发 box-sizing 问题——确保全局设了box-sizing: border-box - 不要在同一个网格容器中混用
fr和像素值（如1fr 200px 1fr）来“凑等宽”，这会让中间列固定、两边自适应，破坏一致性
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
}
.gallery-item {
aspect-ratio: 4 / 3;
overflow: hidden;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
真正难的不是写出这十几行 CSS，而是意识到：Grid 解决的是“容器怎么分”，而图片等高是“内容怎么适配容器”。两者要一起调，缺一不可。尤其当后端返回的图片尺寸千奇百怪时，aspect-ratio + object-fit 这组组合比任何 JS 计算都可靠。
立即学习“前端免费学习笔记（深入）”；
