如何制作破碎/波浪状的网格

Question

我已经尝试过使用负下边距和正上边距的 flexbox，但是 flexbox 的子级比看起来更难设置样式。

有没有更好的方法来达到这个效果？
Flexbox 是不是该走的路？

我怎样才能通过良好的现代解决方案实现这一目标？
您将如何明智地处理这种响应式响应？

.broken-grid {
  display: flex;
  justify-content: center;
  margin: 0 0 -30px -30px;
}

.broken-grid__item {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  padding-left: 30px;
}

.visual {
  width: 25vw;
  height: 100%;
  margin-bottom: 30px;
}

.visual:nth-child(4n + 2) {
  margin-bottom: -50px;
  margin-top: 100px;
}

.visual:nth-child(4n + 3) {
  margin-top: -50px;
  margin-bottom: 100px;
}

<div class="broken-grid">
  <div class="broken-grid__item">
    <picture class="visual">
      <source srcset="https://picsum.photos/700" type="image/webp">
      <img src="https://picsum.photos/700" alt="">
    </picture>
    <picture class="visual">
      <source srcset="https://picsum.photos/700" type="image/webp">
      <img src="https://picsum.photos/700" alt="">
    </picture>
  </div>
  <div class="broken-grid__item">
    <picture class="visual">
      <source srcset="https://picsum.photos/700" type="image/webp">
      <img src="https://picsum.photos/700" alt="">
    </picture>
    <picture class="visual">
      <source srcset="https://picsum.photos/700" type="image/webp">
      <img src="https://picsum.photos/700" alt="">
    </picture>
  </div>
  <div class="broken-grid__item">
    <picture class="visual">
      <source srcset="https://picsum.photos/700" type="image/webp">
      <img src="https://picsum.photos/700" alt="">
    </picture>
    <picture class="visual">
      <source srcset="https://picsum.photos/700" type="image/webp">
      <img src="https://picsum.photos/700" alt="">
    </picture>
  </div>
  <div class="broken-grid__item">
    <picture class="visual">
      <source srcset="https://picsum.photos/700" type="image/webp">
      <img src="https://picsum.photos/700" alt="">
    </picture>
    <picture class="visual">
      <source srcset="https://picsum.photos/700" type="image/webp">
      <img src="https://picsum.photos/700" alt="">
    </picture>
  </div>
</div>

Answer 1

在这个例子中，我使用了一个普通的 css。

灵活显示被使用，就像子元素一样，由继承 - display: inherit。我对间隔使用了gap 规则 - gap: 15px。

为了定义带有图像的偶数/奇数块，我使用了具有 even 和 odd 属性的 :nth-child() 伪类。

body {
    height: 100vh;
    margin: 0;
}

.broken-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: 100%;
    height: 100%;
}

.broken-grid__item {
    display: inherit;
    flex-direction: column;
    gap: inherit;
    flex: 25%;
}

.visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.broken-grid__item:nth-child(odd) {
    margin-top: 50px;
}

.broken-grid__item:nth-child(even) {
    margin-bottom: 50px;
}

<div class="broken-grid">
    <div class="broken-grid__item">
        <picture class="visual">
            <source srcset="https://picsum.photos/700" type="image/webp" />
            <img src="https://picsum.photos/700" alt="" />
        </picture>
        <picture class="visual visual--">
            <source srcset="https://picsum.photos/700" type="image/webp" />
            <img src="https://picsum.photos/700" alt="" />
        </picture>
    </div>
    <div class="broken-grid__item">
        <picture class="visual">
            <source srcset="https://picsum.photos/700" type="image/webp" />
            <img src="https://picsum.photos/700" alt="" />
        </picture>
        <picture class="visual visual--">
            <source srcset="https://picsum.photos/700" type="image/webp" />
            <img src="https://picsum.photos/700" alt="" />
        </picture>
    </div>
    <div class="broken-grid__item">
        <picture class="visual">
            <source srcset="https://picsum.photos/700" type="image/webp" />
            <img src="https://picsum.photos/700" alt="" />
        </picture>
        <picture class="visual visual--">
            <source srcset="https://picsum.photos/700" type="image/webp" />
            <img src="https://picsum.photos/700" alt="" />
        </picture>
    </div>
    <div class="broken-grid__item">
        <picture class="visual">
            <source srcset="https://picsum.photos/700" type="image/webp" />
            <img src="https://picsum.photos/700" alt="" />
        </picture>
        <picture class="visual visual--">
            <source srcset="https://picsum.photos/700" type="image/webp" />
            <img src="https://picsum.photos/700" alt="" />
        </picture>
    </div>
</div>