如何制作破碎/波浪形网格

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。

Flexible 显示被使用，就像子元素一样，通过 inheritance - display: inherit。我对间隔使用 gap 规则 - gap: 15px.

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

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>

如何制作破碎/波浪形网格

How to make a broken / wavy grid

html

css

grid

flexbox