Align elements of different heights vertically in two columns without leaving empty spaces

Question

I have this problem. I have to display several divs in one column in one order on small screens and in another order and in two columns on larger screens. I was already able to solve that using grid, but when it is displayed in two columns, each row takes the height of the largest element. so that gives a lot of empty space vertically between a small element and the element below it. I also tried with flex-box and got the same result. If you could help me, I would appreciate it.

* {
  margin: 0px;
}

body {
  height: 100vh;
}

.row {
  width: 100%;
  display: grid;
  gap: 20px;
}

.box {
  width: 100%;
  margin: 0px;
}

.box-1 {
  background-color: red;
  height: 50px;
}

.box-2 {
  background-color: green;
  height: 100px;
}

.box-3 {
  background-color: blue;
  height: 150px;
}

.box-4 {
  background-color: rgb(0, 247, 255);
  height: 200px;
}

.box-5 {
  background-color: rgb(229, 255, 0);
  height: 250px;
}

@media (min-width: 600px) {
  .row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .box-2 {
    order: 3;
  }

  .box-3 {
    order: 2;
  }

  .box-1 {
    order: 1;
  }
  .box-4 {
    order: 5;
  }
  .box-5 {
    order: 4;
  }

}

<!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">
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div class="row">
    <div class="box box-1">1</div>
    <div class="box box-2">2</div>
    <div class="box box-3">3</div>
    <div class="box box-4">4</div>
    <div class="box box-5">5</div>
  </div>
</body>

</html>

Align elements of different heights vertically in two columns without leaving empty spaces

0 Answers0