Forums

Give help. Get help.

  • # December 4, 2018 at 6:12 am

    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)

    # December 4, 2018 at 6:23 am

    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.

    # December 5, 2018 at 2:06 am

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag