White space issue between the DIV rows

[gowthamNand]

Hi There

Im using normal div container for listing the items in row order, Each row will have two items if the second item on a row is more height than its left item then i’m seeing the white between the first and second row

I had tried with flex, grid properties which is not exactly solving the issue and it prone to some other responsive issue for inside contents. So any one please give a solution to resolve this

Working example:- https://codepen.io/GowthamNand/pen/ZmZwOY
(You will see the white space between first and second row – where i need to be place the next div, likely auto adjust divs based on the available space)

[Paulie_D]

This is entirely normal (you’re after what is called the “masonry” look) and although CSS-Grid can do this I’d suggest you review this definitve Q&A first.

https://stackoverflow.com/questions/44377343/css-only-masonry-layout

It’s not as simple as it looks even with CSS-Grid.

[gowthamNand]

Paulie_D, thanks for reply.

I went through stackflow you referred. This is what i want exactly but here all the divs are with the same width so it works perfectly. But my case is little different as it will have custom width and more over they are drag and drop divs where it can be rearranged div position. So i couldn’t give the static ‘grid-template-columns’ value
please refer this link for example with drag n drop :- https://stackblitz.com/edit/angular-rcp1ht

[Author]

Posts