CSS Grid 是实现图片墙布局最高效的方式之一，通过 grid-template-columns 定义列宽并结合 gap 设置间距，可轻松创建响应式、对齐整齐的图片排列；使用 repeat(auto-fit, minmax(150px, 1fr)) 能自动适配列数，保证每列最小宽度且均匀分布，gap 简化了传统 margin 布局的复杂性，避免溢出问题；配合 width: 100% 和 object-fit: cover 的图片样式设置，确保图像自适应容器并保持比例，最终实现简洁美观的响应式图片墙。
CSS Grid 是实现图片墙布局最高效的方式之一。通过 grid-template-columns 控制列数，配合 gap 设置间距，可以轻松创建响应式、对齐整齐的图片排列效果。
使用 grid-template-columns 定义列宽
该属性用于设置网格容器中每一列的宽度。你可以用固定值（如 200px），也可以使用灵活单位（如 fr 或 auto）来适应不同屏幕。
例如：-
grid-template-columns: repeat(3, 1fr);— 创建三等分的列，每列平均占据可用空间。 -
grid-template-columns: 200px 300px 200px;— 定义三列并指定各自宽度。 -
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));— 自动适配列数，每列最小 150px，最大为 1fr，适合响应式图片墙。
用 gap 控制图片之间的间距
gap 属性设置网格项之间的行间距和列间距，替代传统 margin 布局带来的计算复杂问题。
示例：-
gap: 10px;— 所有方向的间距均为 10px。 -
gap: 15px 10px;— 行间距 15px，列间距 10px。
使用 gap 后，无需给每个图片单独设置外边距，布局更整洁，避免容器溢出或滚动条意外出现。
立即学习“前端免费学习笔记（深入）”；
完整图片墙示例代码
结合上述属性，一个简单的响应式图片墙结构如下：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
padding: 10px;
}
.container img {
width: 100%;
height: auto;
object-fit: cover;
border-radius: 8px;
}
这样无论屏幕大小如何变化，图片都会自动换行排列，保持一致的间距与比例。
基本上就这些，不复杂但容易忽略细节。
