December 4, 2018 at 6:12 am #279836
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)December 4, 2018 at 6:23 am #279837
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.
It’s not as simple as it looks even with CSS-Grid.December 5, 2018 at 2:06 am #279878
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
You must be logged in to reply to this topic.