0

I'm trying to make a 3x3 grid with items that can be expanded and collapsed. When the user clicks on an item that item will expand and push items below it the same column down but the other items in the same row will keep their default height.

The application is a VueJS application. I have tried using display: grid and display: flex but both those solutions will change the height of the entire row to match the new height of the expanded item.


    // flex solution
    .container {
        display: flex;
        justify-content: space-evenly;
        flex-flow: row wrap;
    }

    //...
    .item {
        min-width: 33.33%;
        height: auto;
    }


    // grid solution
    .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(150px, auto)
    }

How do you prevent the other items from being affected by the new height of the expanded item?

SnazzyPencil
  • 79
  • 1
  • 13
  • See if this helps. https://stackoverflow.com/questions/27575779/prevent-a-flex-items-height-from-expanding-to-match-other-flex-items – Amaarockz Jan 20 '21 at 03:35

1 Answers1

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!

SnazzyPencil
  • 79
  • 1
  • 13