Grid building mixin.

/ Published in: SASS
Save to your folder(s)

Mixin sets element width without clogging your markup. Set layout width, number of columns and gutter width.
I use it to make sites responsive when if don't need to change the amount of columns.
eg. 1218px, 978px and 768px grids.


Full width

`.hero {
text-align: center;
@include grid(12);

Two columns

`article {
@include grid(6);
`article:nth-child(2n) { //for two column layout
@include clearfix; //html5 boilerplate clearfix

Three columns

`a {
@include grid(4);
text-align: center;
img, span {
margin: 0 auto;
display: block;
img {
margin-top: rhythm(2);
span:nth-child(2) {
margin-top: rhythm(1);

`a:nth-child(3n) {
@include clearfix;

Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.