无法弄清楚网格是如何工作的

Question

我正在为学校项目创建一个网站，但不知道如何像 flex-wrap 那样包装元素。这就是我想要实现的目标。我无法使用 Flex-box，因为我们需要在页面上同时使用 Flex 和 grid。

<article class="sfeer">
        <h2>Sfeer foto's</h2>
        <div>
          <img src="img/chirologo.png" alt="Foto 1: enkele chiroleden" />
          <img src="img/chirologo.png" alt="Foto 2: enkele chiroleden" />
          <img src="img/chirologo.png" alt="Foto 3: enkele chiroleden" />
          <img src="img/chirologo.png" alt="Foto 4: enkele chiroleden" />
          <img src="img/chirologo.png" alt="Foto 5: enkele chiroleden" />
          <img src="img/chirologo.png" alt="Foto 6: enkele chiroleden" />
          <img src="img/chirologo.png" alt="Foto 7: enkele chiroleden" />
          <img src="img/chirologo.png" alt="Foto 8: enkele chiroleden" class="last" />
        </div>
</article>

.sfeer {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding-top: 5%;

  div {
    display: grid;
    grid-template-columns: repeat(auto-fill, 250px);
    grid-gap: 1rem;
    margin-top: 1rem;

    img {
      display: block;
      width: 250px;
      height: 250px;
      object-fit: cover;
      box-shadow: 0px 0px 3em rgba(0, 0, 0, 0.3);
    }
  }
}

Answer 1

如果允许使用第三方JS库/框架，我建议您使用Bootstrap（BS4/BS5）。它对于网站的自适应外观有很多有用的东西