Floated divs won't stack properly (without gaps)

Question

I have a container with many floated items. The problem is when the size of at least one of them changes, a gap occurs. Is there any way to force them to fill these gaps?

<

Answer 1

You can use flexbox to fill the gaps so that every row has the same height without gaps:

display: flex;
flex-flow: row wrap;

A working example:

.wpr {
  padding: 20px;
  display: flex;
  flex-flow: row wrap;
}

.wpr span {
  width: calc(50% - 20px);
  min-height: 130px;
  background: green;
  margin: 10px;
  display: block;
}

<div class="wpr">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar elit vitae lobortis tempor. Ut vitae quam maximus, iaculis lacus ut, volutpat lacus. Donec eget odio vel ligula ullamcorper hendrerit nec et arcu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar elit vitae lobortis tempor. Ut vitae quam maximus, iaculis lacus ut, volutpat lacus.</span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Answer 2

In order to achieve what you ask you have to create a masonry layout. You can use a JQuery plugin as @git-e-up mentions above since it can be rather difficult to achieve it using only CSS. However, should you like a pure CSS solution, you can find a very nice tutorial here. According to this tutorial, your HTML code should change as follows:

<div class="masonry-layout">
    <div class="masonry-layout__panel">
        <div class="masonry-layout__panel-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar elit 
vitae lobortis tempor. Ut vitae quam maximus, iaculis lacus ut, volutpat 
lacus. Donec eget odio vel ligula ullamcorper hendrerit nec et arcu.Lorem 
ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar elit vitae 
lobortis tempor. Ut vitae quam maximus, iaculis lacus ut, volutpat lacus.
        </div>
    </div>
    <div class="masonry-layout__panel">
        <div class="masonry-layout__panel-content">
            2
        </div>
    </div>
    <div class="masonry-layout__panel">
        <div class="masonry-layout__panel-content">
            3
        </div>
    </div>
    <div class="masonry-layout__panel">
        <div class="masonry-layout__panel-content">
            4
        </div>
    </div>  
    <div class="masonry-layout__panel">
        <div class="masonry-layout__panel-content">
            5
        </div>
    </div>  
    <div class="masonry-layout__panel">
        <div class="masonry-layout__panel-content">
            6
        </div>
    </div>  
    <div class="masonry-layout__panel">
        <div class="masonry-layout__panel-content">
            7
        </div>
    </div> 
    <div class="masonry-layout__panel">
        <div class="masonry-layout__panel-content">
            8
        </div>
    </div> 
    <div class="masonry-layout__panel">
        <div class="masonry-layout__panel-content">
            9
        </div>
    </div> 
    <div class="masonry-layout__panel">
        <div class="masonry-layout__panel-content">
            10
        </div>
    </div>
</div>

Note that the initial .wrp and .span structure has been replaced by a three level structure. The CSS rules should change accordingly to:

.masonry-layout {
    column-width: 270px;
    column-gap: 0;
}
.masonry-layout__panel {
    break-inside: avoid;
    padding: 5px;
}
.masonry-layout__panel-content {
    padding: 20px;
    border-radius: 10px;
    background: green;
    min-height: 130px;
}

This will give you the following masonry layout that you can see in this image, which I think is what you are looking for! You can check the above code in Codepen.

Answer 3

You could add something like this to your .wpr class:

    display: flex;
    flex-flow: column wrap;
    max-height: 800px;

This is kinda hacky though and I think it does require a max-height. You could also look into a jquery plugin like https://isotope.metafizzy.co/layout-modes/masonry.html