如何实现图片页面居中、小间距排列的container/row/col布局代码

你直接复制下面的代码改图片地址、尺寸、间距数值就能用，不需要复杂的第三方框架，原生CSS即可实现效果。

方案1：Flex布局（适配任意数量图片横向排列，最常用） #

核心逻辑是让外层容器自身在页面居中，内部用弹性盒排布图片，用gap属性精准控制图片间距，同时消除浏览器给图片默认加的隐形间隙。

• HTML结构：

<div class="img-group">
  <img src="替换成你的第一张图片路径" alt="图片1">
  <img src="替换成你的第二张图片路径" alt="图片2">
  <img src="替换成你的第三张图片路径" alt="图片3">
  <!-- 后续要加图片直接在这个容器里追加img标签即可 -->
</div>

• 对应CSS样式：

/* 先重置浏览器默认边距，避免布局偏移 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.img-group {
  /* 让容器本身在页面水平居中 */
  width: fit-content;
  margin: 30px auto;
  /* 内部图片横向排列、垂直居中对齐 */
  display: flex;
  align-items: center;
  /* 控制图片间距，要极小间距改2px-4px即可，数值越大间距越宽 */
  gap: 3px;
}

.img-group img {
  /* 自定义图片高度，宽度会自动等比缩放不会变形 */
  height: 220px;
  /* 关键：去掉img作为行内元素自带的底部默认留白 */
  display: block;
}

方案2：Grid网格布局（适合多行多列规整排列场景） #

如果你需要把图片排成固定列数的网格（比如一行3张、一共2行这种效果），用Grid写起来更简洁：

• HTML结构和上面一致，把容器class改成img-grid即可
• 对应CSS样式：

.img-grid {
  /* 容器页面居中 */
  width: fit-content;
  margin: 30px auto;
  /* 网格布局，repeat括号里第一个数字是每行显示的图片数量，要改列数直接改这个数 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 行列统一间距，要极小间距设2px-4px即可 */
  gap: 3px;
}

.img-grid img {
  display: block;
  width: 100%;
  height: 200px;
  /* 图片自动裁剪填充容器，不会拉伸变形 */
  object-fit: cover;
}

常见坑说明：不要给图片加额外的margin来控制间距，很容易出现对不齐、间距不一致的问题；也不要用负margin消除默认间隙，兼容性差，给img加display:block就能彻底消掉默认的隐形空白。

内容的提问来源于stack exchange，提问作者the nr