html - CSS 列显示不正确

Question

我一直在尝试为我的网站构建一个纯 CSS 图片库。但是，列显示不正确，我找不到原因。

这是我看到的。

Chrome 和 FF 都为我生成了相同的 View 。当我稍微改变分辨率时，它变成了这个。

但它的范围非常小，所以当我将页面再缩小几个像素时，方框会回到它们的初始位置(第一张图片)。

这是我正在使用的 CSS:

.media-container {
  column-count: 6;
  column-gap: 3%;
}

.media-container .item {
  margin-bottom: 20px;
  background-color: grey;
  display: inline-block;
}

.media-container .item img {
  width: 100%;
  opacity: 0;
}

<div class="media-container">
  <div class="item"><img src="image1.jpg" /></div>
  <div class="item"><img src="image2.jpg" /></div>
  <div class="item"><img src="image3.jpg" /></div>
  <div class="item"><img src="image4.jpg" /></div>
  . . .
</div>

这是什么原因，我该如何解决？

Answer 1

如果可能，我建议在这种情况下使用 CSS 网格:

.media-container { 
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3%;
}