如何在CSS网格中使图像彼此相邻放置，并在缺少空间时跳转到另一行

debugcn 发表于 Dev

莫特克

我正在尝试使用CSS Grid以图片中显示的方式放置图像，但找不到正确的解决方案。

现在，我只是将网格流更改为列，但是当网格元素遇到容器的末端时，它们不会跳到另一行-它们会调整其大小并保持在同一行中。

我尝试使用grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))-它解决了跳到另一行的问题，但是它为所有元素提供了固定的宽度，而有些图像却没有那么宽。我想避免在图像之间产生空洞。

正确定位的图片图片

关于如何实现的任何想法？

错误的解决方案1

上图中的代码：

container {
            display: grid;
            grid-gap: 1rem;
            grid-auto-flow: column;
        }
photo { // all container's elements have this class
            height: 10rem;
            width: auto;
        }

错误的解决方案2

上图中的代码：

container {
            display: grid;
            grid-gap: 1rem;
            grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
        }

photo {
         height: 10rem;
         max-width: 100%;
      }

焦点风格

您看，这是为flex而不是为的象牙grid。usinggrid表示每行具有相同宽度的列。完全不需要。

html {
  font-size: 10px;
}
.conteiner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.photo {
  height: 10rem;
  margin: 0 1rem 1rem 0;
}
.photo img {
  width: auto;
  height: 100%;
}

<div class="conteiner">
  <div class="photo"><img src="https://via.placeholder.com/500x200"></div>
  <div class="photo"><img src="https://via.placeholder.com/300x200"></div>
  <div class="photo"><img src="https://via.placeholder.com/200x200"></div>
  <div class="photo"><img src="https://via.placeholder.com/400x200"></div>
  <div class="photo"><img src="https://via.placeholder.com/500x200"></div>
  <div class="photo"><img src="https://via.placeholder.com/300x200"></div>
  <div class="photo"><img src="https://via.placeholder.com/200x200"></div>
</div>

虽然我使用的是Justified gallery jQuery插件，但是如果我将每行中的所有图像都填充为整个宽度。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。