3

I have 6 expandable boxes that I want to behave as follows:

  1. Flexible layout:
    • On mobile, be in a single column of 6 boxes
    • On tablet / small laptop, be in 2 columns of 3 boxes each
    • On desktop, be in 3 columns of 2 boxes each
  2. Have no space between boxes in a column, whether one or more boxes are expanded or not

DESIRED (Desktop)

enter image description here

.container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.list {
    width: 100%;  //changed with media queries to allow multiple columns
}
<div class="container">
    <div class="list">
        <h2>Clickable Heading</h2>
        <ul class="hidden">
            <!-- List items -->
        </ul>
    </div>
        
    <!-- 5 more of DIV.list -->
    
</div>

What I've tried

Achieving Goal #1 is easy with Flexbox, but the problem is that the flex direction is rows, not columns, so when a box on row 1 is expanded, ALL of row 2 moves down, including boxes in other columns. This violates Goal #2.

WRONG

Flexible layout but wrong box flow

Achieving Goal #2 is easy by changing flex-direction to column, but then there's no way to wrap the boxes into extra columns without specifying a fixed height to the container, which obviously can't be done when the height is dependent on whether one or more boxes are expanded or not.

Wrapping the individual boxes into DIVs within the container, and changing those DIVs' flex-wrap to column, obviously works... but only for a single layout. I'd have to re-wrap the individual boxes into DIVs for each layout, which completely negates the point of Flexbox.

Is there any way to achieve my goal?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Marcus Hughes
  • 1,147
  • 2
  • 14
  • 21
  • For a dynamic solution, use Grid instead, as Flexbox can't do that alone. Another option could be CSS columns. – Asons Feb 03 '19 at 08:14
  • 1
    related: https://stackoverflow.com/q/44377343/3597276 – Michael Benjamin Feb 03 '19 at 16:42
  • 1
    @LGSon, I tried it, but Grid fails in the same way that Flex does, as it creates multiple rows. If a box in row 1 expands, all of row 2 will expand. I also tried `.container {grid-template-areas: "col1 col2 col3"}` to make *one* row with 3 cells, and then `#box1, #box2 { grid-area: col1 }` to place 2 boxes into a single cell, but unfortunately you can't place more than one grid item into a named area in this way, as it results in overlap (much as if you used absolute positioning). Sadly, `column-count` has the issue of an expanded box in Column 1 flowing over into Column 2. – Marcus Hughes Feb 04 '19 at 06:46
  • 1
    @Michael_B, thank you for the link, since it provided me with the term ("masonry") for the type of layout I'm desiring. That might improve my Google searches! – Marcus Hughes Feb 04 '19 at 06:48

0 Answers0