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>