用 CSS Grid 实现响应式图片网格的正确方式是：grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，配合 gap 控制间距、img 设置 width: 100%; height: 200px; object-fit: cover; 以保持比例不拉伸，并通过 loading="lazy" 和显式 width/height 防布局偏移。
用 CSS Grid 实现响应式图片网格，别碰 float 或 inline-block
浮动布局和行内块在多图排版里容易塌陷、对不齐、换行不可控，Grid 是目前最直接可靠的解法。关键不是“怎么画格子”，而是让图片自动适配容器宽度并保持比例。
核心思路：用 grid-template-columns 配合 minmax() + auto-fit，让列数随容器宽度自适应：
img-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 8px;
}-
250px是单图最小宽度，低于这个值就自动减少列数 -
1fr让剩余空间均分，避免右侧留白 -
gap控制间距，比用 margin 更干净（不会影响 grid track 计算）
图片本身要撑满单元格，但不能失真
直接给 <img> 设 width: 100%; height: 100% 会拉伸变形。正确做法是用 object-fit 控制裁剪或缩放方式：
img-grid img {
width: 100%;
height: 200px; /* 统一高度，便于对齐 */
object-fit: cover; /* 优先保证构图，裁两边 */
/* 或用 object-fit: contain; 保留全部内容，但可能有白边 */
}- 必须设固定高度（如
200px）或用aspect-ratio（注意兼容性：Chrome 103+、Firefox 110+ 支持） -
object-fit: cover适合封面图、海报类；contain适合图标、LOGO 等需完整显示的场景 - 不要依赖图片原始尺寸做布局——用户上传的图宽高比千差万别
IE 不支持 Grid？那就降级用 display: flex
如果项目仍需支持 IE11，Grid 行不通，改用 Flex 布局模拟网格。缺点是无法真正“二维”控制，但能保基本结构：
立即学习“前端免费学习笔记（深入）”；
img-grid-flex {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
img-grid-flex img {
flex: 1 1 250px; /* 最小 250px，可伸缩 */
height: 200px;
object-fit: cover;
}-
flex: 1 1 250px中第一个1是flex-grow，第二个是flex-shrink，250px是基准宽度 - Flex 下无法像 Grid 那样精确控制行高一致性，某些图片可能因内容重排导致高度微差
- 务必加
flex-wrap: wrap，否则所有图片会强行挤在一行
加载慢、首屏卡顿？图片懒加载和占位不能少
几十张图一次性加载会拖垮页面，尤其移动端。原生 loading="lazy" 能解决大部分问题，但需配合骨架占位防止布局跳动：
<img src="photo.jpg" loading="lazy" width="300" height="200" alt="描述">
-
width和height属性必须写（即使 CSS 里已设），否则浏览器无法预留空间，图片加载时会把下方内容往下顶 - 如果用
background-image方式加载，就得靠伪元素或::before加载占位 SVG，复杂度上升 - Webpack/Vite 用户可用
lazysizes库增强兼容性（比如支持data-src切换）
Grid 的列数计算、object-fit 的渲染行为、懒加载的时机——这三个地方最容易被忽略，调的时候卡半天才发现是其中一个没对齐。
