response grid layout

_grid.scss

/*
  Variables:
    $screen-size-small
    $screen-size-medium
    $screen-size-large
    
    $grid-small-screen-width
    $grid-medium-screen-width
    $grid-large-screen-width
    
    $grid-column-count
*/

.grid-row {
  &:before,
  &:after {
    visibility: hidden;
    display: block;
    content: "";
    height: 0;
    clear: both;
  }
  &.margin {
    margin-bottom: 10px;
  }
  @media (mix-width: $screen-size-small) {
    width: $grid-small-screen-width;
  }
  @media (mix-width: $screen-size-medium) {
    width: $grid-medium-screen-width;
  }
  @media (mix-width: $screen-size-large) {
    width: $grid-large-screen-width;
  }
}

@mixin make-columns($columnCount) {
  @if (round($columnCount) !=$columnCount) {
    @error "Grid system can only use integer column count. It will not round.";
  }
  @for $i from 1 through $columnCount {
    .grid-span-#{$i} {
      width: percentage($i / $columnCount);
      float: left;
      box-sizing: border-box;
    }
  }
}

@include make-columns($grid-column-count);

hahahahahaha yes