Achieving Grid Layout Using Flexbox

Today I learned that I've been using Flexbox without fully understanding how it works. What's been wrong with me was that I gave fixed width (e.g. 250px) to flex items. This is not really good idea because it could potentially create huge whitespace between flex items and viewport on certain screen widths.

Flexbox is nice and easy. It makes it a lot easier for us to solve many problems especially when the contents are dynamic. But unfortunately, Flexbox is not cut out for grid layout. Creating a grid layout using Flexbox still may sound hack.

Having said that, there're always ways to achieve a solid grid layout using Flexbox.

HTML

<div class="wrapper">
  <!-- row 1, 4 individual boxes -->
  <div class="row">
    <article class="col-1-2">
      <h3>Boston Cream Pie</h3>
      <img src="img/boston-cream.jpg" alt="Boston creme pie.">
      <p>Boston's famous dessert, a combination of yellow cake, vanilla pudding, and chocolate frosting.</p>
      <p><a href="http://www.foodnetwork.com/recipes/boston-cream-pie-recipe0-1908702">Read more &gt;&gt;</a></p>
    </article>
    <article class="col-1-2">
      <h3>Coconut Cream Pie</h3>
      <img src="img/coconut-cream.jpg" alt="Coconut cream pie.">
      <p>Coconut cream pie will take you to an island escape. Especially delicious in winter.</p>
      <p><a href="https://www.favfamilyrecipes.com/coconut-cream-pie-2/">Read more &gt;&gt;</a></p>
    </article>
    <article class="col-1-2">
      <h3>Key Lime Pie</h3>
      <img src="img/keylime-pie.jpg" alt="Key lime pie.">
      <p>Key lime pie is based on the tiny key limes from Florida. These limes are less sour than conventional limes. </p>
      <p><a href="https://www.epicurious.com/recipes/food/views/key-lime-pie-108125" target="_blank">Read more &gt;&gt;</a></p>
    </article>
    <article class="col-1-2">
      <h3>Pumpkin Pie</h3>
      <img src="img/pumpkin-pie.jpg" alt="Pumpkin pie.">
      <p>A staple of every Thanksgiving dinner table, pumpkin pie is delicious any time of year.</p>
      <p><a href="http://www.kingarthurflour.com/recipes/pumpkin-pie-recipe" target="_blank">Read more &gt;&gt;</a></p>
    </article>
    </div>
    <!-- row 2, 2 boxes spanning 2 rows -->
    <div class="row">
    <article class="col-2">
      <h3>Key Lime Pie</h3>
      <img src="img/keylime-pie.jpg" alt="Key lime pie.">
      <p>Key lime pie is based on the tiny key limes from Florida. These limes are less sour than conventional limes. </p>
      <p><a href="https://www.epicurious.com/recipes/food/views/key-lime-pie-108125" target="_blank">Read more &gt;&gt;</a></p>
    </article>
    <article class="col-2">
      <h3>Pumpkin Pie</h3>
      <img src="img/pumpkin-pie.jpg" alt="Pumpkin pie.">
      <p>A staple of every Thanksgiving dinner table, pumpkin pie is delicious any time of year.</p>
      <p><a href="http://www.kingarthurflour.com/recipes/pumpkin-pie-recipe" target="_blank">Read more &gt;&gt;</a></p>
    </article>
    </div>
    <!-- row 3: narrow left column, wide right/content column -->
    <div class="row">
    <article class="col-3 order-second">
      <h3>Coconut Cream Pie</h3>
      <img src="img/coconut-cream.jpg" alt="Coconut cream pie.">
      <p>Coconut cream pie will take you to an island escape. Especially delicious in winter.</p>
      <p><a href="https://www.favfamilyrecipes.com/coconut-cream-pie-2/">Read more &gt;&gt;</a></p>
    </article>
    <article class="col-1-4 order-first">
      <h3>Boston Cream Pie</h3>
      <img src="img/boston-cream.jpg" alt="Boston creme pie.">
      <p>Boston's famous dessert, a combination of yellow cake, vanilla pudding, and chocolate frosting.</p>
      <p><a href="http://www.foodnetwork.com/recipes/boston-cream-pie-recipe0-1908702">Read more &gt;&gt;</a></p>
    </article>
    </div>
    <!-- row 4: one column -->
    <div class="row">
    <article class="col-4">
      <h3>Boston Cream Pie</h3>
      <img src="img/boston-cream.jpg" alt="Boston creme pie.">
      <p>Boston's famous dessert, a combination of yellow cake, vanilla pudding, and chocolate frosting.</p>
      <p><a href="http://www.foodnetwork.com/recipes/boston-cream-pie-recipe0-1908702">Read more &gt;&gt;</a></p>
    </article>
    </div>
    <!-- row 5, 1-2-1 boxes -->
    <div class="row">
    <article class="col-2-4 order-second">
      <h3>Coconut Cream Pie</h3>
      <img src="img/coconut-cream.jpg" alt="Coconut cream pie.">
      <p>Coconut cream pie will take you to an island escape. Especially delicious in winter.</p>
      <p><a href="https://www.favfamilyrecipes.com/coconut-cream-pie-2/">Read more &gt;&gt;</a></p>
    </article>
    <article class="col-1-2 order-first">
      <h3>Boston Cream Pie</h3>
      <img src="img/boston-cream.jpg" alt="Boston creme pie.">
      <p>Boston's famous dessert, a combination of yellow cake, vanilla pudding, and chocolate frosting.</p>
      <p><a href="http://www.foodnetwork.com/recipes/boston-cream-pie-recipe0-1908702">Read more &gt;&gt;</a></p>
    </article>
    <article class="col-1-2 order-third">
      <h3>Key Lime Pie</h3>
      <img src="img/keylime-pie.jpg" alt="Key lime pie.">
      <p>Key lime pie is based on the tiny key limes from Florida. These limes are less sour than conventional limes. </p>
      <p><a href="https://www.epicurious.com/recipes/food/views/key-lime-pie-108125" target="_blank">Read more &gt;&gt;</a></p>
    </article>
  </div>
</div>

CSS

.wrapper {
  width: 97%;
  max-width: 1200px;
  margin: 0 auto;
  float: none;
  background-color: #fff;
}
/* hack to make images flexible in our prototype */
div img {
  width: 100%;
  max-width: 250px; 
}
/* grid system */
.row {
  display: flex;
  flex-flow: row wrap;
  flex: 0 1 auto;
}
[class*="col-"] {
  flex: 0 0 92%;
  margin: 0 4%;
}
.col-1-2,
.col-1-4 {
  background-color: #ffc;
}
.col-2,
.col-2-4 {
  background-color: #ccf;
}
.col-3 {
  background-color: #fcf;
}
.col-4 {
  background-color: #cff;
}

/* global alignment options */
.reverse {
  flex-direction: row-reverse;
}

/* Mobile Landscape Screen Sizes */
@media only screen and (min-width: 480px)  {
  [class*='col-']{
    margin-left: 4%;
    margin-right: 0%;
  }
  .col-1-2,
  .col-2 {
    flex: 0 0 44%; 
  }
  .col-1-4,
  .col-3,
  .col-4,
  .col-2-4 {
    flex: 0 0 92%;
  }
  .reverse [class*='col-'] {
    margin-left: 0%;
    margin-right: 4%;
  }
}
/* Desktop screen Sizes */
@media only screen and (min-width: 768px) {
  .col-1-2,
  .col-1-4 {
    flex: 0 0 20%;
  }
  .col-2,
  .col-2-4 {
    flex: 0 0 44%;
  }
  .col-3 {
    flex: 0 0 68%;
  }
  .col-4 {
    flex: 0 0 92%;
  }
  .order-first {
    order: 1;
  }	
  .order-second {
    order: 2;
  }
  .order-third {
    order: 3;
  }
  .order-fourth {
    order: 4;
  }
}

Mobile

Tablet

Desktop