I got inspired by this article from CSS-tricks; "Don’t Overthink It Grids."

I think we've seen too many grid systems these days and they don't take maintainability into account.

I'm convinced that silenced grids are the way to go if you want to keep maintainability high.

First, what is a silenced grid, it's a grid that doesn't pollute your HTML with classes to tell the different state sizes. The original intent with CSS is to use the selector as a reference and then do the CSS in an external file, by stating a class for each style behaviour is an anti-pattern.

The HTML got polluted more and more with javascript and CSS stuff; i think it for sure our job as good CSS developers to keep the HTML as clean as possible

The grid i propose

/**
 *  mixins/_clearfix.scss
 */
@mixin clearfix() {
  &:after {
    display: table;
    content: '';
    clear: both;
  }
}
/**
 *  _grids.scss
 */
$grids: 6, 12;
$gutter: 15px;

%grid {
  margin-left: -$gutter;
  margin-bottom: $gutter;
  width: calc(100% + #{$gutter});

  @include clearfix();
}

%grid--dg {
  margin-bottom: $gutter;
  margin-left: -($gutter * 2);
  width: calc(100% + (#{$gutter} * 2));

  @include clearfix();
}

%grid--ng {
  width: 100%;

  @include clearfix();
}

@each $grid in $grids {
  @for $i from 1 through $grid {
    // With gutter
    %col--#{$i}-#{$grid} {
      width: calc((#{$i} / #{$grid}) * 100% - #{$gutter});
    }

    // Double gutter
    %col--#{$i}-#{$grid}--dg {
      width: calc((#{$i} / #{$grid}) * 100% - (#{$gutter} * 2));
    }

    // No gutter
    %col--#{$i}-#{$grid}--ng {
      width: calc((#{$i} / #{$grid}) * 100%);
    }
  }
}

@function col-size($i, $grid) {
  @return calc((#{$i} / #{$grid}) * 100% - #{$gutter});
}

@function col-size($i, $grid) {
  @return calc((#{$i} / #{$grid}) * 100% - (#{$gutter} * 2));
}

@function col-size--ng($i, $grid) {
  @return calc((#{$i} / #{$grid}) * 100%);
}

%grid-gutter {
  margin: 0 0 $gutter $gutter;
  float: left;
}

%grid-gutter--dg {
  $gutter: $gutter * 2;
  margin: 0 0 $gutter $gutter;
  float: left;
}

Example

This is the clean way i would do it, it only outputs the css you use in the grid, and stack the classes that uses it.

<main>  
    <aside class="sidebar">
        <a href="#">Link1</a>
        <a href="#">Link2</a>
        <a href="#">Link3</a>
        <a href="#">Link4</a>
    </aside>
    <section class="content">
        some content...
    </section>
</main>
main {  
    max-width: 1170px;
    width: 100%;
    margin: 0 auto;

    @extend %grid;
}

.sidebar {
    @extend %col--4-12;
    @extend %grid-gutter;
}

.content {
    @extend %col--8-12;
    @extend %grid-gutter;
}

Simple and maintainable