How to make a broken / wavy grid

Question

I have tried this with flexbox with negative bottom and positive top margins, but the children of a flexbox are harder to style than it seemed.

Is there a better way to achieve this effect?
Is Flexbox even the way to go here?

How could I achieve this with a good modern solution?
And how would you handle this responsive wise?

.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>

Does this answer your question? [Create a Masonry grid with flexbox (or other CSS)](https://stackoverflow.com/questions/43901955/create-a-masonry-grid-with-flexbox-or-other-css) — Mr T, Mar 09 '21 at 09:31
I'm not really sure if a masonry grid is what I'm looking for, do you suggest using empty children to fill the empty spaces above and beneath the grid items? — Robbe Verhoest, Mar 09 '21 at 09:37

score 2 · Accepted Answer · answered Mar 09 '21 at 09:51

In this example, I used a regular css.

Flexible display is used, just like for the child element, by inheritance - display: inherit. I used the gap rule for the intervals - gap: 15px.

And to define an even / odd block with images, I used :nth-child() pseudo-classes with even and odd attributes.

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

1 Answers1