[Vuejs]-How to prevent item height expansion from expanding other item in the same row – CSS grid/flex?

by

0👍

✅

So after some more searching I figured that the actually layout style that I needed aligns with the Masonry/Mosaic pattern. Since I now know the name I could do more specific Googling and found a blog post written by Tobias Ahlin with a solution.

https://tobiasahlin.com/blog/masonry-with-css/

The gist is that you need to have the flow direction be columns while being wrapped and then place orderings on the elements using :nth-child.


    /* Render items as columns */
    .container {
      display: flex;
      flex-flow: column wrap;
    }
    
    /* Re-order items into rows */
    .item:nth-child(3n+1) { order: 1; }
    .item:nth-child(3n+2) { order: 2; }
    .item:nth-child(3n)   { order: 3; }
    
    /* Force new columns */
    .container::before,
    .container::after {
      content: "";
      flex-basis: 100%;
      width: 0;
      order: 2;
    }

If I’m honest, I’m not really sure why this works. It will also behave unexpectedly depending on the heights of the container and the items.

Hope this helps anyone else who’s having issues with this deceptively simple design layout!

Leave a comment