/* 12-column Grid */
// settings
$grid-columns: 12;
$grid-gutter: 3;
$single-col-width: (100 - (($grid-columns - 1) * $grid-gutter )) / $grid-columns;
// container
.grid {
width: 100%;
&:after {
content: "";
display: table;
clear: both;
}
}
// column alignment
[class*='col-'] {
float: left;
margin-right: $grid-gutter * 1%;
.grid &:last-of-type {
margin-right: 0;
}
border-collapse: collapse !important;
}
// column widths
// (this generates our individual column classes)
@for $column from 1 through $grid-columns {
.col-#{$column} {
width: (($single-col-width * $column) + (($column - 1) * $grid-gutter) * 1%)
}
}
/* Markup example
<div class="grid">
<div class="col-3">Sidebar</div>
<div class="col-9">Main Content</div>
</div>
*/
I think the end of float-driven grids is near. But I can't use Flexbox on my client projects until browser support is absolutely 100%, so I'm still using this.
The column alignment method is from a CSS Tricks post:
https://css-tricks.com/dont-overthink-it-grids/
Then I added the equation that handles any column & gutter setting, as well as the SASS @for loop setup (which generates all of our individual column classes).
The column alignment method is from a CSS Tricks post:
https://css-tricks.com/dont-overthink-it-grids/
Then I added the equation that handles any column & gutter setting, as well as the SASS @for loop setup (which generates all of our individual column classes).
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.