Flexbox Layout Pattern: 5 Square (1 Large, 4 small)

Question

I'm trying to put together a flexbox layout - for the purposes of this question I'll call it a 'square five block' layout (see image) - but I'm running into trouble, as all the experiments I have tried do not wrap correctly.

I've seen the same layout done using floats, but I was hoping to future-proof it a little and use a more up-to-date method - hence flexbox. I've tried searching for this pattern but there doesn't appear to be a consistent name for it, so finding similar examples is proving tough.

I'm using viewport units too to ensure that the blocks remain perfectly square, all based on viewport widths (vw) units.

div { width: 25vw; height: 25vw; }
div:first-of-type { width: 50vw; height: 50vw; }

The key features is that all the blocks should be square, the first block however should be the size of the remaining four combined. Has anyone seen or worked on such a layout before?

Thanks!!

Answer 1

Nested flexboxes would work here in combination with media queries.

Codepen Demo with media query

Basically:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.parent {
  width: 100vw;
  display: flex;
}
.col {
  flex: 0 0 50vw;
  height: 50vw;
  background: blue;
}
.wrap {
  display: flex;
  flex-wrap: wrap
}
.box {
  flex: 0 0 25vw;
  height: 25vw;
}
.red {
  background: red;
}
.pink {
  background: pink;
}
.orange {
  background: orange;
}
.grey {
  background: grey;
}

<div class="parent">
  <div class="col"></div>
  <div class="col wrap">
    <div class="box red"></div>
    <div class="box pink"></div>
    <div class="box orange"></div>
    <div class="box grey"></div>
  </div>
</div>

Answer 2

See the code below and expand the result. I have used flexbox

body {
  margin: 0;
  height: 100vh;
  width: 100vw;
}

.wrapper {
  height: 100%;
}

.layout.horizontal,
.layout.vertical {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.layout.horizontal {
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.layout.vertical {
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.flex {
  -ms-flex: 1 1 0.000000001px;
  -webkit-flex: 1;
  flex: 1;
  -webkit-flex-basis: 0.000000001px;
  flex-basis: 0.000000001px;
}

.box {
  color: #fff;
  text-align: center;
}

.box.blue {
  background: #312783;
}

.box.green {
  background: #0B983A;
}

.box.yellow {
  background: #E1BD48;
}

.box.pink {
  background: #D2007F;
}

.box.orange {
  background: #EB6053;
}

@media all and (max-width: 768px) {
  .change-in-responsive.layout.horizontal {
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

<div class="layout horizontal wrapper change-in-responsive">
  <div class="box large flex blue">1</div>
  <div class="flex layout vertical">
    <div class="flex layout horizontal">
      <div class="box green flex">2</div>
      <div class="box yellow flex">3</div>
    </div>
    <div class="flex layout horizontal">
      <div class="box pink flex">4</div>
      <div class="box orange flex">5</div>
    </div>
  </div>
</div>