<section>
  <div class="column">One Third</div>
  <div class="column">One Third</div>
  <div class="column">One Third</div>
</section>

<section>
  <div class="column">One Half</div>
  <div class="column">One Half</div>
</section>

<section>
  <div class="column">One Fourth</div>
  <div class="column">One Fourth</div>
  <div class="column">One Fourth</div>
  <div class="column">One Fourth</div>
</section>

<section>
  <div class="column">One Sixth</div>
  <div class="column">One Sixth</div>
  <div class="column">One Sixth</div>
  <div class="column">One Sixth</div>
  <div class="column">One Sixth</div>
  <div class="column">One Sixth</div>
</section>

<section>
  <div class="column">One Half</div>
  <div class="column">One Fourth</div>
  <div class="column">One Fourth</div>
</section>

<section>
  <div class="column">One Sixth</div>
  <div class="column">Two Thirds</div>
  <div class="column">One Sixth</div>
</section>

section {
  max-width: 740px;
  margin: 0 auto;
  display: flex;
}

.column {
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

section:nth-of-type(5) .column:first-of-type {
  flex-grow: 2;
  flex-shrink: 2;
  flex-basis: 22px;
}

section:nth-of-type(6) .column:nth-of-type(2) {
  flex-grow: 4;
  flex-shrink: 4;
  flex-basis: 66px;
}

/* OTHER STYLES */
  
html, body {
  height: 100%;
  box-sizing: border-box;
}

body {
  font-family: 'Raleway', sans-serif;
  padding: 10px;
  background: linear-gradient(135deg, #b04, #f80) fixed;
}

.column {
  padding: 10px 0;
  background-color: rgba(255, 0, 0, 0.25);
  text-align: center;
  
  border: 1px solid transparentize(white, 0.25);
  background-color: transparentize(white, 0.8);
  color: transparentize(white, 0.1);
}
View Compiled 
/*
This is an example from Unraveling Flexbox, my book on building flexbox layouts for the real world. Check it out!
https://unravelingflexbox.com/
*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.