How to Stack Floating Divs with Varying Heights Seamlessly and Eliminate White Space?

This is a common requirement with modern design trends to be able to stack up divs in a nice masonry fashion even if they have different heights. See the image below. Here we will show how to do it easily with just CSS. The divs with dynamic content have different heights and they create white space below them and take the height of the highest div in the row. We will remove this space and stack them as shown in the image. See the below HTML and the CSS.

HTML

<div class="floating-div-wrap">
 <div class="floating-container">
    <div class="floating-item" style="height: 120px;">Item 1</div>
    <div class="floating-item" style="height: 260px;">Item 2</div>
    <div class="floating-item" style="height: 210px;">Item 3</div>
    <div class="floating-item" style="height: 180px;">Item 4</div>
    <div class="floating-item" style="height: 160px;">Item 5</div>
    <div class="floating-item" style="height: 260px;">Item 6</div>
  </div>
</div>

CSS

.floating-div-wrap{
  padding: 15px;
}
.floating-container {
      column-count: 3; 
      column-gap: 10px;
    }

    .floating-item {
      display: inline-block;
      width: 100%;
      margin-bottom: 10px; 
      box-sizing: border-box;
    }
    .floating-item {
      background-color: #aaaaaa;
      padding: 10px;
    }

With this CSS we can specify how many <div> or <li> are allowed in a row and stack up properly. Even long paragraphs of text can also be divided in an eye-catching way.

Hope this will help someone in need.