Responsive Grid Layouts Utilizing SASS

_layout.scss

$content-width: 58.75rem;
$padding-col: 0.625rem;

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.content {
  @include clearfix;
  margin: 0 auto;
  max-width: $content-width;
  padding: 0 $padding-col;
  width: 90%;
}

.grid-container {
  @include clearfix;
  max-width: 1200px;
  width: 100%;
}

.row::before,
.row::after {
  clear: both;
  content: '';
  display: table;
}

[class*='col-'] {
  float: left;
  min-height: 1px;
  width: 16.66%;
}

.padded-col {
  padding: 0 $padding-col;
}

.col-1 {
  width: 16.66%;
}

.col-2 {
  width: 33.33%;
}

.col-3 {
  width: 50%;
}

.col-4 {
  width: 66.66%;
}

.col-5 {
  width: 83.33%;
}

.col-6 {
  width: 100%;
}

// Tablets
@media (max-width: $tablet-landscape-min) {
  [class*='column-'] {
    width: 100%;
  }
}

// Mobile Devices
@media (max-width: $phone-portrait-max) {
  [class*='column-'] {
    width: 100%;
  }
}

_media_queries.scss

$super-ultra-tiny-flip-phone-max: 240px;
$flip-phone-max: 319px;
$phone-portrait-max: 480px;
$phone-landscape-max: 640px;
$tablet-portrait-min: 641px;
$tablet-portrait-max: 768px;
$tablet-landscape-min: 769px;
$tablet-landscape-max: 1024px;
$desktop-min: 1025px;
$desktop-max: 1440px;
$xl-desktop-min: 1441px;
$xl-desktop-max: 1920px;
$xxl-desktop-min: 1921px;