Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>Justified Grid</h1>
<div class="grid">
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></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)
// ----

$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-count - $i) + $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;

.grid {
  text-align: justify;
  font-size: 0.1px;
}

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

.grid-col {
  display: inline-block;
  width: $grid-col-size;
  padding-top: $grid-col-size;
  margin-top: $grid-gutter;
  vertical-align: middle;
  font-size: medium;
  background-color: orange;
  @include remove-topmost-margins;
  &:last-of-type {
	  @include adjust-last-line;
  }
}

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

SassMeister-output.css

.grid {
  text-align: justify;
  font-size: 0.1px;
}

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

.grid-col {
  display: inline-block;
  width: 22%;
  padding-top: 22%;
  margin-top: 4%;
  vertical-align: middle;
  font-size: medium;
  background-color: orange;
}
.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%;
}

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

SassMeister-rendered.html

<h1>Justified Grid</h1>
<div class="grid">
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></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>