Listing elements without any vertical whitespace on wrap

Question

I want to display a dynamic list of elements with different heights from left to right. Wrapping rows elements should start right under the above rows element bottom, eliminating any space for the grid (pulling them to above element).

Desired outcome:

I have tried to use both flex and grid, but it always creates an even row with the height of the tallest element.

*,
body {
  margin: 0;
  padding: 0;
}

main {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 1rem;
  width: 100vw;
}

.box {
  background-color: red;
  padding: 1rem;
}

.short {
  height: 5rem;
}

.middle {
  height: 8rem;
}

.tall {
  height: 12rem;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>FlexBox</title>
</head>

<body>
  <main>
    <div class="box tall">1</div>
    <div class="box short">2</div>
    <div class="box middle">3</div>
    <div class="box short">4</div>
    <div class="box tall">5</div>
    <div class="box short">6</div>
    <div class="box middle">7</div>
    <div class="box short">8</div>
    <div class="box tall">9</div>
    <div class="box short">10</div>
    <div class="box middle">11</div>
    <div class="box short">12</div>
  </main>
</body>

</html>

Is there any simpler solution for this that I'm missing?

But in your first image, if the red boxes wrap, do you want the tiny `6` box to appear under the wide `1` box? Because that would look strange. If you want the vertical boxes (6 and 12 for example) to remain together, I would create an extra container around them so they wrap together. — Kokodoko, Nov 03 '22 at 10:22
Its not important that they stay together. The more elements that gets added is going to make them spread more appart I'm aware. I only want new row columns to start at the above rows element in the same column. I know that the image isn't perfect, imagine hte width as equal for all elements. — L.Wiseby, Nov 03 '22 at 10:28

chri3g91 · Answer 1 · 2022-11-03T10:47:05.513

You can utilize flex and divide the content into column; E.g...

        <div style="display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;">
           <div style="display: flex; align-items: flex-start; flex-direction: column;">
              <div style="background-color: red;height: 100px; width: 150px; margin: 1rem;"></div>
              <div style="background-color: red;height: 170px; width: 120px; margin: 1rem;"></div>
              <div style="background-color: red;height: 80px; width: 100px; margin: 1rem;"></div>
            </div>
            <div style="display: flex; align-items: flex-start; flex-direction: column;">
              <div style="background-color: red;height: 80px; width: 100px; margin: 1rem;"></div>
              <div style="background-color: red;height: 100px; width: 150px; margin: 1rem;"></div>
              <div style="background-color: red;height: 170px; width: 120px; margin: 1rem;"></div>
            </div>                                 
            <div style="display: flex; align-items: flex-start; flex-direction: column;">
              <div style="background-color: red;height: 170px; width: 120px; margin: 1rem;"></div>
              <div style="background-color: red;height: 100px; width: 150px; margin: 1rem;"></div>
              <div style="background-color: red;height: 80px; width: 100px; margin: 1rem;"></div>
            </div>
         </div>

Yes, this will work, but that means that I need to wrap every 4th element in a div (or how many I want in a row before wrapping). I see the problem where I'm missing one flexcontainer. — L.Wiseby, Nov 03 '22 at 11:48

Listing elements without any vertical whitespace on wrap

1 Answers1