用 repeat() 实现等宽图片墙需配合 minmax() 与响应式断点：小屏 repeat(2,1fr)，中屏 repeat(3,1fr)，大屏 repeat(auto-fill,minmax(250px,1fr)))；图片容器设 place-items:center，图片设 max-width:100%、max-height:100%、object-fit:contain。
用 repeat() 实现等宽图片墙的网格结构
直接用 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))) 就能撑满容器、自动换行、每列等宽——但前提是图片本身不拉伸变形，且容器有明确宽度或 max-width 限制。否则在窄屏下可能只有一列，宽屏下又挤出太多列导致单图过小。
关键不是单纯套 repeat()，而是配合 minmax() 和响应式断点控制最小列宽，同时让图片“自适应内容区域”而非强行填满格子。
-
auto-fill比auto-fit更稳妥：前者保留空列占位（适合需要对齐边框/阴影的场景），后者会收缩空列、合并剩余空间 - 别写死像素值如
repeat(4, 250px)：无法响应屏幕变化，小屏会横向滚动 - 如果父容器没设
width或max-width，1fr会无限扩张，导致单列超宽
图片不被拉伸变形的三个必要条件
Grid 只管布局，不管图片渲染。常见错误是给 <img> 直接设 width: 100%; height: 100%，结果图片被强制裁切或糊掉。
正确做法是让图片作为内容“居中内嵌”，保持原始宽高比：
立即学习“前端免费学习笔记（深入）”；
- 给图片容器（比如
<figure>或直接<div>）设display: grid+place-items: center - 图片本身设
max-width: 100%、max-height: 100%、object-fit: contain - 避免给图片设固定
height，否则破坏比例；若必须统一高度，改用aspect-ratio配合object-fit: cover
figure {
display: grid;
place-items: center;
background: #f5f5f5;
}
figure img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
移动端和桌面端列数差异大时怎么平滑过渡
纯靠 minmax(200px, 1fr) 在 320px 宽屏幕下仍会生成一列 320px 宽的格子，而图片可能只有 200px 宽，留白难看。这时候需要媒体查询干预列数逻辑，而不是依赖单一 repeat() 表达式。
- 小屏（
max-width: 480px）：用repeat(2, 1fr)固定两列，避免单列太宽 - 中屏（
481px – 768px）：切到repeat(3, 1fr) - 大屏及以上：才启用
repeat(auto-fill, minmax(250px, 1fr))) - 所有断点里都加
gap: 8px，别漏掉——Grid 的gap不继承，也不受margin影响
.gallery {
display: grid;
gap: 8px;
}
@media (max-width: 480px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 481px) and (max-width: 768px) {
.gallery {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 769px) {
.gallery {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)));
}
}
为什么有时图片墙错位或出现空白列
这不是 Grid 失效，而是 HTML 结构或 CSS 优先级干扰了网格项的尺寸计算。最常踩的坑是：
- 图片外层包裹了带
margin或padding的标签（如<a>），而没重置box-sizing: border-box - 图片加载前高度为 0，Grid 已完成布局，加载后突然撑开造成错位（可用
aspect-ratio或min-height占位） - 父容器用了
overflow: hidden但子项有阴影或描边，被意外裁剪 - 用了
grid-auto-flow: column却忘了配grid-template-rows，导致列方向溢出不可见
调试时先检查浏览器开发者工具里每个网格项的 grid-row-start / grid-row-end 是否连续，再看实际渲染尺寸是否和 grid-template-columns 计算值一致。差几像素，往往就是 border 或 outline 没算进 box-sizing。
