Just Another Sassy Grid

sassy-grid.scss

// Just Another Sassy Grid
// ---------------------------------------------

$pad: 2rem;
$base-container-width: 100rem;

$gridpad: ( $pad / $base-container-width ) * 100%;

.row {
  // margin-bottom: $gridpad; // Optional row padding
  @extend .clearfix;
}

.full,
.one-half,
.one-third,
.two-thirds,
.one-fourth,
.two-fourths,
.three-fourths,
.one-sixth,
.two-sixths,
.three-sixths,
.four-sixths,
.five-sixths {
  float: left;
  margin: 0 0 $gridpad $gridpad;
}

.full,
.first {
  margin-left: 0;
}

// Add .flow-reverse class for rtl column flow
.flow-reverse  {
  float: right;
  margin: 0 $gridpad $gridpad 0;

  &.first {
    margin-right: 0;
  }
}

// COLUMNS
.full           { width: 100%; }

.one-half       { width: (100/2 + $gridpad/2) - $gridpad; }

.one-third      { width: (100/3 + $gridpad/3) - $gridpad; }
.two-thirds     { width: ((100/3 + $gridpad/3) * 2) - $gridpad; }

.one-fourth     { width: (100/4 + $gridpad/4) - $gridpad; }
.two-fourths    { width: ((100/4 + $gridpad/4) * 2) - $gridpad; }
.three-fourths  { width: ((100/4 + $gridpad/4) * 3) - $gridpad; }

.one-sixth      { width: (100/6 + $gridpad/6) - $gridpad; }
.two-sixths     { width: ((100/6 + $gridpad/6) * 2) - $gridpad; }
.three-sixths   { width: ((100/6 + $gridpad/6) * 3) - $gridpad; }
.four-sixths    { width: ((100/6 + $gridpad/6) * 4) - $gridpad; }
.five-sixths    { width: ((100/6 + $gridpad/6) * 5) - $gridpad; }