nested layouts with flex

Question

Is it possible to create the following layout using flex?

The grey boxes need to nest into the layout above, the large boxes have a max-width of 460px and smaller boxes have a max-width of 213px. My attempt is here, as you can see the first 2 smaller boxes match the height of the bigger box, but I want the second bigger box to actually nest underneath instead of the small boxes growing,

.property__cards {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    .card {
        max-width:213px;
        &:first-child,
        &:last-child {
            max-width:460px;
        }
    }
}

https://codepen.io/87Development/pen/eeMYKE

Yes, by grouping them as 2 columns, at left 1 big on top and 2 small bottom, at right the opposite — Asons, Nov 21 '17 at 10:38
Accepted, but what if I don't have the level of control to wrap them in columns? — Udders, Nov 21 '17 at 10:53
Then you either need to use CSS Grid, `float` or combine Flexbox with script. — Asons, Nov 21 '17 at 11:02
Optionally, if you can't change the initial markup, you can with script, and create those column wrappers _on the go_, and as soon page is loaded, you can then control them as _2 columns_. — Asons, Nov 21 '17 at 11:05
What I mean with this is, it is often much simpler to use script to move items in and out from a parent wrapper, and then using CSS to control them, than to use script to control their appearance. — Asons, Nov 21 '17 at 11:09
@Udders [Here's codepen](https://codepen.io/fen1x/pen/EbEjWj?editors=1100) showing how you can do it with css-grid — fen1x, Nov 21 '17 at 11:19

score 0 · Answer 1 · answered Nov 21 '17 at 10:59

I propose:

.content .grey{
  background-color: grey;
}

.content{
  width: 100%;
  display: flex;
}

.content .big-square{
  height: 150px;
  width: 150px;
}
.content .little-square{
  height: 50px;
  width: 50px;
}

.content .little-square-container{
  display: flex;
  justify-content: space-between;
}

.content .col-left{
  display: flex;
  flex-direction: column;
}

.content .col-left .little-square{
  margin-top: 5px;
}

.gutter{
  margin-top: 5px;
  height: 40px;
  width:30px;
}
.content .col-right .little-square{
  margin-bottom: 5px;
}

<div class="content">
  <div class="col-left">
    <div class="big-square grey"></div>
    <div class="little-square-container">
     <div class="little-square grey"></div>
     <div class="little-square grey"></div>
    </div>
  </div>
  <div class="gutter grey"></div>
  <div class="col-right">
    <div class="little-square-container">
      <div class="little-square grey"></div>
      <div class="little-square grey"></div>
    </div>
    <div class="big-square grey"></div>
  </div>
</div>

What's the behavior of the gutter between the columns?

Ilya Streltsyn · Answer 2 · 2017-11-21T11:24:53.253

This layout seems a better use case for CSS Grids, not flexboxes: see forked pen.

.property__cards {
    width: 100%;
    display:grid;
    grid-template-columns: repeat(4, 210px);
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column dense;
    /* other styles unchanged... */

    .card {
        &:first-child,
        &:last-child {
            grid-column: span 2;
            grid-row: span 2;
        }
        &:nth-last-child(2) {
            grid-column: 4;
        }
    }
}

nested layouts with flex

2 Answers2