SASS mixin for grid layout - css

Question

Let's say that we have the following markup:
<section class="wrapper">
<div>column1</div>
<div>column2</div>
<div>column3</div>
<div>column4</div>
</section>
I need a mixin which will set equally the width of the columns and will float them to the left. A simple four column grid. Here is what I came up so far.
#mixin grid($columns: 2, $tag: "div") {
#{$tag} {
width: 100% / $columns;
box-sizing: border-box;
-moz-box-sizing: border-box;
float: left;
}
&:after {
display: table;
content: " ";
clear: both;
*zoom: 1;
}
}
My question is: is there any better way to do this and do I miss something.

Answer 1

You might want to have a look at singularitygs!
With this sass extension you can write
div {
#include grid-span(1,1,4,$output-style: 'float');
}
The parameters for grid-span are (with, startpos, context, options). All numbers will be converted to ratio-based widths. The above example can be read as:
width 1 at position 1 in a grid-context of 4
=> width: 25%; margin-left: 0;
(ouput-style: 'float' is needed, because you are targeting multiple divs)
Or you can define your base grid first, and leave out the context:
$grids: 4;
div {
#include grid-span(1,1,$output-style: 'float');
}
You can even go further and use breakpoints to have different grids for different window sizes:
$grids: 4; // base grid (mobile first)
$grids: add-grid(12 at 980px); // 12-grid for everything above 980px
$output-style: 'float'; // set the output-style globally
div {
#include grid-span(2,1); // => 50%
#include breakpoint(980px) {
#include grid-span(4,1); => 33.3333%
}
}
There is alot more possible with Singularity, so check out their wiki!