Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>Flex &amp; Justified Grid</h1>
<div class="grid">
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
</div>
<p><b>Note:</b> Do not minify the HTML. Text-justify requires spaces between elements for it to work!</p>
<p>Inspired by <a href="http://justifygrid.com">Justify Grid</a> article and demo.</p>

SassMeister-input.scss

// ----
// Sass (v3.4.5)
// Compass (v1.0.1)
// ----

/**
 *	Justify Grid, augmented with Flexbox for modern browsers.
 *
 *	Usage: Alter the column count and width of gutter (percent) to taste.
 *		Requires Autoprefixer: https://github.com/postcss/autoprefixer
 */

$grid-col-count: 4;
$grid-gutter: 4%;

// remove units from sizes
@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

// remove top margin from the first row
@mixin remove-topmost-margins {
  @for $i from 1 through $grid-col-count {
    &:nth-of-type(#{$i}) > * {
      margin-top: 0;
    }
  }
}

// add a margin-right depending on number of cols in the last line
@mixin adjust-last-line {
  // note: no need to adjust if the last line is full (stops before $i = $grid-col-count)
  @for $i from 1 to $grid-col-count {
    &:nth-of-type(#{$grid-col-count}n+#{$i}) {
      margin-right: ($grid-gutter + $grid-col-size) * ($grid-col-count - $i);
    }
  }
}

// combined gutter widths can’t be one column’s width or more
$max-gutter-width: 99% / ( ($grid-col-count + 1) * ($grid-col-count - 1) );
@if strip-units($grid-gutter) > strip-units($max-gutter-width) {
  @warn "Gutter size of #{$grid-gutter} is too big. Using #{$max-gutter-width} instead.";
  $grid-gutter: $max-gutter-width;
}

$n: $grid-col-count;
$grid-col-size: (100% - ($n - 1) * $grid-gutter) / $n;

// font-size reduced to allow for small gutters;
// not needed if gutter computes to more than roughly 4px
.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: justify;
  font-size: 0.1px;
}

// this forces the last line to justify, as normal text does not do so
.grid:after {
  content: "";
  display: inline-block;
  width: 100%;
}

// inline-blocks for old browsers; overridden as flex items in modern ones
.grid-col {
  display: inline-block;
  width: $grid-col-size;
  vertical-align: middle;
  font-size: medium;
  @include remove-topmost-margins;
  &:last-of-type {
    @include adjust-last-line;
  }
}

// square boxes with top margins the same size as the gutters
.grid-content {
  margin-top: $grid-gutter * $grid-col-count;
  padding-top: 100%;
  background-color: orange;
}

// add some whitespace around the whole 
body {
  width: 80%;
  margin: 0 auto;
  padding: 1em 0;
}

SassMeister-output.css

/**
 *	Justify Grid, augmented with Flexbox for modern browsers.
 *
 *	Usage: Alter the column count and width of gutter (percent) to taste.
 *		Requires Autoprefixer: https://github.com/postcss/autoprefixer
 */
.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: justify;
  font-size: 0.1px;
}

.grid:after {
  content: "";
  display: inline-block;
  width: 100%;
}

.grid-col {
  display: inline-block;
  width: 22%;
  vertical-align: middle;
  font-size: medium;
}
.grid-col:nth-of-type(1) > * {
  margin-top: 0;
}
.grid-col:nth-of-type(2) > * {
  margin-top: 0;
}
.grid-col:nth-of-type(3) > * {
  margin-top: 0;
}
.grid-col:nth-of-type(4) > * {
  margin-top: 0;
}
.grid-col:last-of-type:nth-of-type(4n+1) {
  margin-right: 78%;
}
.grid-col:last-of-type:nth-of-type(4n+2) {
  margin-right: 52%;
}
.grid-col:last-of-type:nth-of-type(4n+3) {
  margin-right: 26%;
}

.grid-content {
  margin-top: 16%;
  padding-top: 100%;
  background-color: orange;
}

body {
  width: 80%;
  margin: 0 auto;
  padding: 1em 0;
}

SassMeister-rendered.html

<h1>Flex &amp; Justified Grid</h1>
<div class="grid">
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
</div>
<p><b>Note:</b> Do not minify the HTML. Text-justify requires spaces between elements for it to work!</p>
<p>Inspired by <a href="http://justifygrid.com">Justify Grid</a> article and demo.</p>