# SASS grid system improvements

@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>

• To answer your question no, using percentages alone will usually make your grid responsive for the most part. However you may want to look into breakpoints. I have a sass grid framework that utilizes four breakpoints via media query. This way you can tell the grid how to structure itself for the standards of phone, tablet, laptop, and desktop. – aaronmallen Jun 7 '14 at 0:16

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>