SASS grid system improvements I've got this own made grid system made in SASS:

@import "../mixins/cross-browser-elements/box";

$columns: 12 !default;
$gutter-width-px: 20px !default;

@function calculate-column-width($index) {
  @return percentage($index / $columns);
}

.row {
  overflow: hidden;
  max-width: 100%;

  .column {
    float: left;
    min-height: 1px;
    padding-left: ($gutter-width-px / 2);
    padding-right: ($gutter-width-px / 2);
    @include box-sizing(border-box);

    &amp;:first-child {
      padding-left: 0;
    }

    &amp;:last-child {
      padding-right: 0;
    }

    @for $index from 1 through $columns {
      &amp;.size-#{$index} {
        width: calculate-column-width($index);
      }
    }
  }

}


It looks pretty good in my opinion, it works and has a working padding on each element.

The thing I worry about is when I want to make it responsive. Do I have to go in my stylesheet and give every column a width of 100% when it's below a certain screen size with the @media selector?

My HTML markup looks like this:

    &lt;div class="row"&gt;
        &lt;div class="column size-10"&gt;&lt;p&gt;column-size-10&lt;/p&gt;&lt;/div&gt;
        &lt;div class="column size-2"&gt;&lt;p&gt;column-size-2&lt;/p&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
        &lt;div class="column size-1"&gt;&lt;p&gt;column-size-1&lt;/p&gt;&lt;/div&gt;
        &lt;div class="column size-1"&gt;&lt;p&gt;column-size-1&lt;/p&gt;&lt;/div&gt;
        &lt;div class="column size-1"&gt;&lt;p&gt;column-size-1&lt;/p&gt;&lt;/div&gt;
        &lt;div class="column size-1"&gt;&lt;p&gt;column-size-1&lt;/p&gt;&lt;/div&gt;
        &lt;div class="column size-1"&gt;&lt;p&gt;column-size-1&lt;/p&gt;&lt;/div&gt;
        &lt;div class="column size-1"&gt;&lt;p&gt;column-size-1&lt;/p&gt;&lt;/div&gt;
        &lt;div class="column size-1"&gt;&lt;p&gt;column-size-1&lt;/p&gt;&lt;/div&gt;
        &lt;div class="column size-1"&gt;&lt;p&gt;column-size-1&lt;/p&gt;&lt;/div&gt;
        &lt;div class="column size-1"&gt;&lt;p&gt;column-size-1&lt;/p&gt;&lt;/div&gt;
        &lt;div class="column size-1"&gt;&lt;p&gt;column-size-1&lt;/p&gt;&lt;/div&gt;
        &lt;div class="column size-1"&gt;&lt;p&gt;column-size-1&lt;/p&gt;&lt;/div&gt;
        &lt;div class="column size-1"&gt;&lt;p&gt;column-size-1&lt;/p&gt;&lt;/div&gt;
    &lt;/div&gt;
I'm unsure of your SCSS, because it doesn't seem to use media-queries, and isn't small-screen-first: but here are my HTML suggestions:

The columns would likely stack on small screens, and aren't really columns semantically in general. You can note that they are smaller pieces inside a container by calling them blocks or something, and then use floats in combination with @media queries. Giving them static classes like bootstrap does, describes style in HTML – when it should stay in the styles. You can use an inner .inner-w or something to emulate a 'main column' like most web pages.

&lt;section class='container section-name'&gt;
&lt;div class='inner-w'&gt;

    &lt;div class='block block-name'&gt;
        some block
    &lt;/div&gt;

    &lt;div class='block other-block-name'&gt;
        some other block
    &lt;/div&gt;

&lt;/div&gt;
&lt;/section&gt;


If you have an actual grid, it is a list, and should be described that way. Then you can style the list without adding classes to every li.

&lt;section class='container section-name'&gt;
&lt;div class='inner-w'&gt;

    &lt;ul class='grid'&gt;
        &lt;li&gt;
            grid item 1
        &lt;/li&gt;
        &lt;li&gt;
            grid item 2
        &lt;/li&gt;
        &lt;li&gt;
            grid item 3
        &lt;/li&gt;
        &lt;li&gt;
            grid item 4
        &lt;/li&gt;
        &lt;li&gt;
            grid item 5
        &lt;/li&gt;
        &lt;li&gt;
            grid item 6
        &lt;/li&gt;
    &lt;/ul&gt;

&lt;/div&gt;
&lt;/section&gt;