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

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:

    

        

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.
        
    
    

        

            2
        
    
    

        

            3
        
    
    

        

            4
        
    
  
    

        

            5
        
    
  
    

        

            6
        
    
  
    

        

            7
        
    
 
    

        

            8
        
    
 
    

        

            9
        
    
 
    

        

            10
        
    

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.