使用CSS Grid和gap属性可实现响应式图片网格布局。通过display: grid创建二维布局，repeat(auto-fit, minmax(200px, 1fr))设置自适应列数，gap统一控制间距，避免外边距问题；配合width: 100%、object-fit: cover等样式，确保图片缩放与对齐美观，提升排版效率与兼容性。
在网页设计中，图片组合排版是常见需求。使用 CSS Grid Layout 可以轻松实现灵活、响应式的布局效果，而 gap 属性则能有效控制图片之间的间距，让整体更美观整洁。
Grid Layout 布局基础
Grid 是一种二维布局系统，适合将页面划分为行和列。通过设置容器为 display: grid，可以快速构建图片网格。
基本结构如下：
.container {display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
上述代码创建了一个三列等宽的网格容器，每个项目（如图片）自动填入网格单元。使用 repeat(3, 1fr) 表示三列均分可用空间。
立即学习“前端免费学习笔记（深入）”；
使用 gap 控制图片间距
gap 属性用于设置网格行与列之间的间隔，替代了过去需要 margin 或负边距的复杂方式。
你可以单独设置行列间距：
.container {gap: 15px 20px; /* 行间距 15px，列间距 20px */
}
也可以统一设置：
.container {
gap: 10px;
}
gap 不会影响容器边缘，只作用于项目之间，避免了外边距叠加问题，使排版更可控。
响应式图片网格排版
为了让图片组合在不同设备上都表现良好，可以结合 minmax() 和 auto-fit 实现自适应列数。
.container {display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
这段代码含义是：每列最小 200px，最大为 1fr，浏览器会根据容器宽度自动调整列数。屏幕越小，列数越少，实现真正响应式。
搭配 img { width: 100%; height: auto; } 可确保图片在网格内正常缩放。
实用技巧与注意事项
在实际使用中，有几个关键点需要注意：
- 确保图片容器设置 box-sizing: border-box，避免 padding 影响布局计算
- 可为图片添加 object-fit: cover 保持统一尺寸的同时不拉伸变形
- 避免在子元素上使用 margin-top/bottom 来控制间距，优先使用 gap
- 在旧版浏览器中需考虑兼容性，必要时提供 fallback 方案
基本上就这些。用好 Grid 和 gap，图片排版变得简单又高效。不需要浮动或定位，也能做出专业级的视觉效果。
