Chris Coyer flexbox grid demo Nov 22, 2016

flex-grid.css

/**
  * Don’t Overthink It (Flexbox) Grids 
  * @author      Chris Coyer
  * @example     https://css-tricks.com/dont-overthink-flexbox-grids/
*/
body {
  padding: 20px;
}

.flex-grid,
.flex-grid-thirds{
  margin: 0 0 20px 0;
}
.flex-grid-half{
  margin: 20px 0 0 0;
}
.col {
  background: salmon;
  padding: 20px;
}
.flex-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex-grid .col {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.flex-grid-thirds,
.flex-grid-half {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.flex-grid-thirds .col {
  width: 32%;
}
.flex-grid-half .col {
  width: 49.09091%;
}

@media (max-width: 400px) {
  .flex-grid,
  .flex-grid-half,
  .flex-grid-thirds {
    display: block;
  }
  .flex-grid .col,
  .flex-grid-half .col,
  .flex-grid-thirds .col {
    width: 100%;
  }
  .flex-grid .col,
  .flex-grid-thirds .col {
    margin: 0 0 10px 0;
  }
  .flex-grid-half .col {

    margin: 10px 0 0 0;
  }
}
* {
  box-sizing: border-box;
}

flex-grid.html

<div class="flex-grid">
  <div class="col">This little piggy went to market.</div>
  <div class="col">This little piggy stayed home.</div>
  <div class="col">This little piggy had roast beef.</div>
</div>

<div class="flex-grid">
  <div class="col">This little piggy went to market.</div>
  <div class="col">This little piggy stayed home.</div>
  <div class="col">This little piggy had roast beef.</div>
  <div class="col">This little piggy had none.</div>
  <div class="col">This little piggy went wee wee wee all the way home.</div>
</div>

<div class="flex-grid-thirds">
  <div class="col">This little piggy went to market.</div>
  <div class="col">This little piggy stayed home.</div>
  <div class="col">This little piggy had roast beef.</div>
</div>
<div class="flex-grid-half">
  <div class="col">This little piggy stayed home.</div>
  <div class="col">This little piggy had roast beef.</div>
</div>