How to remove vertical whitespace between different sized in gridview?

Question

I have divs of different heights. I want to place these in a grids without any blank white space. Please follow below.codesandbox.

.container {
      display: flex;
      flex-wrap: wrap;
      width: 400px;
    } 
    
    .sm {
      height: 200px;
      background: gold;
      border: 1px solid black;
      width: 45%; 
    }
    
    .md {
      height: 250px;
      background: red;
      border: 1px solid black;
      width: 45%;
    }

   <div class="container">
            <div class="sm"></div>
            <div class="md"></div>
            <div class="sm"></div>
            <div class="sm"></div>
            <div class="md"></div>
            <div class="sm"></div>
            <div class="sm"></div>
            <div class="md"></div>
        </div>

You could try [columns](https://developer.mozilla.org/en-US/docs/Web/CSS/columns) instead of flex. — Yoshi, Sep 21 '20 at 09:25

score 0 · Answer 1 · answered Sep 21 '20 at 09:07

You can not remove blank white space when different box has a different height. To remove vertical blank space use a similar height for all the boxes.

You used margin for .container *. That sets margin for all the elements inside the container. To remove horizontal white space, do not use margin for .container *.

score 0 · Answer 2 · answered Sep 21 '20 at 09:13

You are not able to remove whitespace in one div if the height is different in each section. So it is needed to divide each section as follows.

.container {
  display: flex;
  width: 400px;
}

.items {
  display: flex;
  flex-direction: column;
  width: 45%;
}

.sm {
  height: 200px;
  background: gold;
  border: 1px solid black;
  width: 100%; 
}

.md {
  height: 250px;
  background: red;
  border: 1px solid black;
  width: 100%;
}

<div class="container">
  <div class="items">
    <div class="sm"></div>
    <div class="sm"></div>
    <div class="md"></div>
    <div class="sm"></div>
  </div>
  <div class="items">
    <div class="md"></div>
    <div class="sm"></div>
    <div class="sm"></div>
    <div class="md"></div>
  </div>
</div>

Not applicable in my case. As these items will be fetched from api sorted by date. — Sujoy Saha, Sep 21 '20 at 09:21
Then this will help. https://stackoverflow.com/questions/34417059/make-divs-of-different-heights-fill-vertical-space-on-new-line — Derek Wang, Sep 21 '20 at 09:23

How to remove vertical whitespace between different sized in gridview?

2 Answers2