如何实现一个图片按行组织的css图片库

Question

我尝试建立一个特定的图片库。从视觉上来说，下面这个完美符合我的愿望。但我希望图像首先按行排序，而不是按列排序，这是我的代码中的情况。这里是： html代码：

  <div class="gallery">
<div class="gallery-wrapper">

  <div><img src="assets/image01" /></div>
  <div><img src="assets/image02" /></div>
  <div><img src="assets/image03" /></div>
  <div><img src="assets/image04" /></div>
  <div><img src="assets/image05" /></div>
  <div><img src="assets/image06" /></div>

</div>

这是CSS：

.gallery {
  height: auto;
  display: flex;
  justify-content: center;
  text-align: center;
}
.gallery-wrapper {
  column-count: 3;
  column-gap: 6px;
   width: 90%;
 }

我还尝试使用网格布局（见下文）。在这里，图像首先按行显示，这就是我想要的。但是同一列的两个图像之间的间隙并不相同，这破坏了第一个代码的画廊所具有的视觉和谐感。

.gallery-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.gallery-wrapper div {
  width: 100%; 
  height: auto !important;
  display: flex;
}

.gallery-wrapper img {
  width: 100% !important;
  height: auto !important;
  align-self: start;
}

如何才能两全其美？ 预先感谢您！

迪迪尔

Answer 1

使用 CSS Grid 和 grid-gap 属性 可以给你一个排列整齐的画廊。我相信你的 CSS 网格版本是解决你的问题的正确方法。

将此添加到您的

.gallery-wrapper

（网格）：

gap: 1rem;

您可以根据自己的喜好随意更改间隙的大小。

我确实注意到您正在使用 img 元素。不确定这是否是您所说的不均匀间隙的意思。这个答案是假设您的图像是正方形的，因为否则当前它们将与每个网格块的顶部对齐并且不居中。为了解决这个问题，您可以垂直居中对齐

img

元素（在包含它的

div

中设置属性），或者完全删除

img

元素并设置

div

的 background-image 属性为您想要的图像的属性，以及

background-size: cover;
background-position: center;

让图像覆盖整个网格块。请参阅 MDN 中的

background