A flexbox based grid like one you would find in Foundation or Bootstrap

flexbox-grid-example.html

<h2 class="text-center">Regular Grid</h2>

<div class="grid-container container-padding">
  <div class="grid grid-padding testing">

    <div id="header" class="small-12 colm">
      <p class="text-center">
        SMALL-12
      </p>
    </div>

  </div>
</div>

<div class="grid-container container-padding">
  <div class="grid grid-padding testing">

    <div class="small-12 medium-6 colm">
      <p class="text-center">
        SMALL-12 MEDIUM-6
      </p>
    </div>

    <div class="small-12 medium-6 colm">
       <p class="text-center">
        SMALL-12 MEDIUM-6
      </p>
    </div>

  </div>
</div>

<div class="grid-container container-padding">
  <div class="grid grid-padding testing">

    <div class="small-12 large-3 colm">
      <p class="text-center">
        SMALL-12 LARGE-3
      </p>
    </div>

    <div class="small-12 large-3 colm">
       <p class="text-center">
        SMALL-12 LARGE-3
      </p>
    </div>

    <div class="small-12 large-3 colm">
      <p class="text-center">
        SMALL-12 LARGE-3
      </p>
    </div>

    <div class="small-12 large-3 colm">
       <p class="text-center">
        SMALL-12 LARGE-3
      </p>
    </div>

  </div>
</div>

<div class="grid-container container-padding">
  <div class="grid grid-padding testing">

    <div class="small-12 medium-4 large-2 colm">
      <p class="text-center">
        SMALL-12 MEDIUM-4 LARGE-2
      </p>
    </div>

    <div class="small-12 medium-4 large-2 colm">
       <p class="text-center">
        SMALL-12 MEDIUM-4 LARGE-2
      </p>
    </div>

    <div class="small-12 medium-4 large-2 colm">
      <p class="text-center">
        SMALL-12 MEDIUM-4 LARGE-2
      </p>
    </div>

    <div class="small-12 medium-4 large-2 colm">
       <p class="text-center">
        SMALL-12 MEDIUM-4 LARGE-2
      </p>
    </div>

    <div class="small-12 medium-4 large-2 colm">
       <p class="text-center">
        SMALL-12 MEDIUM-4 LARGE-2
      </p>
    </div>

    <div class="small-12 medium-4 large-2 colm">
       <p class="text-center">
        SMALL-12 MEDIUM-4 LARGE-2
      </p>
    </div>

  </div>
</div>

<h2 class="text-center">Justify Center</h2>

<div class="grid-container container-padding">
  <div class="grid justify-center grid-padding testing">

    <div id="header" class="small-8 colm">
      <p class="text-center">
        SMALL-8
      </p>
    </div>

  </div>
</div>

<h2 class="text-center">Justify Start</h2>

<div class="grid-container container-padding">
  <div class="grid justify-start grid-padding testing">

    <div id="header" class="small-8 colm">
      <p class="text-center">
        SMALL-8
      </p>
    </div>

  </div>
</div>

<h2 class="text-center">Justify End</h2>

<div class="grid-container container-padding">
  <div class="grid justify-end grid-padding testing">

    <div id="header" class="small-8 colm">
      <p class="text-center">
        SMALL-8
      </p>
    </div>

  </div>
</div>

<h2 class="text-center">Auto Grid</h2>

<div class="grid-container container-padding">
  <div class="grid auto grid-padding testing">

    <div id="header" class="colm">
      <p class="text-center">
        AUTO GRID
      </p>
    </div>

    <div id="header" class="colm">
      <p class="text-center">
        AUTO GRID
      </p>
    </div>

    <div id="header" class="colm">
      <p class="text-center">
        AUTO GRID
      </p>
    </div>

  </div>
</div>

<h2 class="text-center">Hidden Div's</h2>

<div class="hide-for-small">
  <div class="grid-container container-padding">
    <div class="grid grid-padding testing">
      
      <div class="small-12 colm">
        <p class="text-center">
          This will be hidden on a small screen...
        </p>
      </div>
      
    </div>
  </div>
</div>

<h2 class="text-center">Offsets</h2>

<div class="grid-container container-padding">
  <div class="grid grid-padding testing">
    
    <div class="small-12 large-6 large-offset-3 colm">
      <p class="text-center">
        SMALL-12 LARGE-3 LARGE-OFFSET-2
      </p>
    </div>
    
  </div>
</div>

flexbox-grid.css

/* Grid Container */
.grid-container {
  max-width: 1200px;
  margin: 0 auto;
}

.grid-container.container-padding {
  padding-bottom: .9375rem;
}

.grid-container.testing {
  background: #333;
}

/* Grid */
.grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

/* Columns */
.grid .colm {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  min-height: 0px;
  min-width: 0px;
  border: 1px solid CCC;
  box-sizing: border-box; /* important to keep the padding from increasing the div size */
}

.grid.testing .colm:nth-child(1n) {
  background: #CCC;
}

.grid.testing .colm:nth-child(2n) {
  background: #BBB;
}

.grid.testing .colm:nth-child(3n) {
  background: #AAA;
}

.grid.testing .colm:nth-child(4n) {
  background: #999;
}

/* Grid Justify */
.grid.justify-center {
  justify-content: center;
}

.grid.justify-start {
  justify-content: flex-start;
}

.grid.justify-end {
  justify-content: flex-end;
}

/* Grid Padding */
.grid-padding > .colm {
  padding-right: .9375rem;
  padding-left: .9375rem;
}

/* Auto Grid */
.grid.auto {
  justify-content: space-around;
}

.grid.auto-between {
  justify-content: space-between;
}

.grid.auto .colm {
  align-self: center;
  flex-grow: 1;
  min-width: 8.33333%;
}

.grid.auto-between .colm {
  align-self: center;
  flex-grow: 1;
  min-width: 8.33333%;
}

/* Small Grid */
.grid > .small-1 {
  width: 8.33333%;
}

.grid > .small-2 {
  width: 16.66667%;
}

.grid > .small-3 {
  width: 25%;
}

.grid > .small-4 {
  width: 33.33333%;
}

.grid > .small-5 {
  width: 41.66667%;
}

.grid > .small-6 {
  width: 50%;
}

.grid > .small-7 {
  width: 58.33333%;
}

.grid > .small-8 {
  width: 66.66667%;
}

.grid > .small-9 {
  width: 75%;
}

.grid > .small-10 {
  width: 83.33333%;
}

.grid > .small-11 {
  width: 91.66667%;
}

.grid > .small-12 {
  width: 100%;
}

.grid > .small-offset-1 {
  margin-left: calc(8.33333% + 0.9375rem);
}

.grid > .small-offset-2 {
  margin-left: calc(16.66667% + 0.9375rem);
}

.grid > .small-offset-3 {
  margin-left: calc(25% + 0.9375rem);
}

.grid > .small-offset-4 {
  margin-left: calc(33.33333% + 0.9375rem);
}

.grid > .small-offset-5 {
  margin-left: calc(41.66667% + 0.9375rem);
}

.grid > .small-offset-6 {
  margin-left: calc(50% + 0.9375rem);
}

.grid > .small-offset-7 {
  margin-left: calc(58.33333% + 0.9375rem);
}

.grid > .small-offset-8 {
  margin-left: calc(66.66667% + 0.9375rem);
}

.grid > .small-offset-9 {
  margin-left: calc(75% + 0.9375rem);
}

.grid > .small-offset-10 {
  margin-left: calc(83.33333% + 0.9375rem);
}

.grid > .small-offset-11 {
  margin-left: calc(91.66667% + 0.9375rem);
}

div.hide-for-small {
  display: none;
}

/* Medium Grid */
@media screen and (min-width: 40em) {
  .grid > .medium-1 {
    width: 8.33333%;
  }

  .grid > .medium-2 {
    width: 16.66667%;
  }

  .grid > .medium-3 {
    width: 25%;
  }

  .grid > .medium-4 {
    width: 33.33333%;
  }

  .grid > .medium-5 {
    width: 41.66667%;
  }

  .grid > .medium-6 {
    width: 50%;
  }

  .grid > .medium-7 {
    width: 58.33333%;
  }

  .grid > .medium-8 {
    width: 66.66667%;
  }

  .grid > .medium-9 {
    width: 75%;
  }

  .grid > .medium-10 {
    width: 83.33333%;
  }

  .grid > .medium-11 {
    width: 91.66667%;
  }

  .grid > .medium-12 {
    width: 100%;
  }

  .grid > .medium-offset-0 {
    margin-left: 0;
  }

  .grid > .medium-offset-1 {
    margin-left: calc(8.33333% + 0.9375rem);
  }

  .grid > .medium-offset-2 {
    margin-left: calc(16.66667% + 0.9375rem);
  }

  .grid > .medium-offset-3 {
    margin-left: calc(25% + 0.9375rem);
  }

  .grid > .medium-offset-4 {
    margin-left: calc(33.33333% + 0.9375rem);
  }

  .grid > .medium-offset-5 {
    margin-left: calc(41.66667% + 0.9375rem);
  }

  .grid > .medium-offset-6 {
    margin-left: calc(50% + 0.9375rem);
  }

  .grid > .medium-offset-7 {
    margin-left: calc(58.33333% + 0.9375rem);
  }

  .grid > .medium-offset-8 {
    margin-left: calc(66.66667% + 0.9375rem);
  }

  .grid > .medium-offset-9 {
    margin-left: calc(75% + 0.9375rem);
  }

  .grid > .medium-offset-10 {
    margin-left: calc(83.33333% + 0.9375rem);
  }

  .grid > .medium-offset-11 {
    margin-left: calc(91.66667% + 0.9375rem);
  }

  div.hide-for-small {
    display: block;
  }

  div.hide-for-medium {
    display: none;
  }
}

/* Large Grid */
@media screen and (min-width: 64em) {
  .grid > .large-1 {
    width: 8.33333%;
  }

  .grid > .large-2 {
    width: 16.66667%;
  }

  .grid > .large-3 {
    width: 25%;
  }

  .grid > .large-4 {
    width: 33.33333%;
  }

  .grid > .large-5 {
    width: 41.66667%;
  }

  .grid > .large-6 {
    width: 50%;
  }

  .grid > .large-7 {
    width: 58.33333%;
  }

  .grid > .large-8 {
    width: 66.66667%;
  }

  .grid > .large-9 {
    width: 75%;
  }

  .grid > .large-10 {
    width: 83.33333%;
  }

  .grid > .large-11 {
    width: 91.66667%;
  }

  .grid > .large-12 {
    width: 100%;
  }

  .grid > .large-offset-0 {
    margin-left: 0;
  }

  .grid > .large-offset-1 {
    margin-left: calc(8.33333% + 0.9375rem);
  }

  .grid > .large-offset-2 {
    margin-left: calc(16.66667% + 0.9375rem);
  }

  .grid > .large-offset-3 {
    margin-left: calc(25% + 0.9375rem);
  }

  .grid > .large-offset-4 {
    margin-left: calc(33.33333% + 0.9375rem);
  }

  .grid > .large-offset-5 {
    margin-left: calc(41.66667% + 0.9375rem);
  }

  .grid > .large-offset-6 {
    margin-left: calc(50% + 0.9375rem);
  }

  .grid > .large-offset-7 {
    margin-left: calc(58.33333% + 0.9375rem);
  }

  .grid > .large-offset-8 {
    margin-left: calc(66.66667% + 0.9375rem);
  }

  .grid > .large-offset-9 {
    margin-left: calc(75% + 0.9375rem);
  }

  .grid > .large-offset-10 {
    margin-left: calc(83.33333% + 0.9375rem);
  }

  .grid > .large-offset-11 {
    margin-left: calc(91.66667% + 0.9375rem);
  }

  div.hide-for-medium {
    display: block;
  }

  div.hide-for-large {
    display: none;
  }
}