SASS grid system improvements

Question

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);

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

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

    @for $index from 1 through $columns {
      &.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:

    <div class="row">
        <div class="column size-10"><p>column-size-10</p></div>
        <div class="column size-2"><p>column-size-2</p></div>
    </div>
    <div class="row">
        <div class="column size-1"><p>column-size-1</p></div>
        <div class="column size-1"><p>column-size-1</p></div>
        <div class="column size-1"><p>column-size-1</p></div>
        <div class="column size-1"><p>column-size-1</p></div>
        <div class="column size-1"><p>column-size-1</p></div>
        <div class="column size-1"><p>column-size-1</p></div>
        <div class="column size-1"><p>column-size-1</p></div>
        <div class="column size-1"><p>column-size-1</p></div>
        <div class="column size-1"><p>column-size-1</p></div>
        <div class="column size-1"><p>column-size-1</p></div>
        <div class="column size-1"><p>column-size-1</p></div>
        <div class="column size-1"><p>column-size-1</p></div>
    </div>

Answer 1

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.

<section class='container section-name'>
<div class='inner-w'>

    <div class='block block-name'>
        some block
    </div>

    <div class='block other-block-name'>
        some other block
    </div>

</div>
</section>

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.

<section class='container section-name'>
<div class='inner-w'>

    <ul class='grid'>
        <li>
            grid item 1
        </li>
        <li>
            grid item 2
        </li>
        <li>
            grid item 3
        </li>
        <li>
            grid item 4
        </li>
        <li>
            grid item 5
        </li>
        <li>
            grid item 6
        </li>
    </ul>

</div>
</section>