Skip to content

Instantly share code, notes, and snippets.

@richardsweeney
Created November 10, 2012 11:41
Show Gist options
  • Save richardsweeney/4050853 to your computer and use it in GitHub Desktop.
Save richardsweeney/4050853 to your computer and use it in GitHub Desktop.
A mixin for creating percentage based grid columns on the fly.
$columns: 12;
$gridWidth: 100%;
@mixin drupalCols($rows: 4, $padding: 0 10px) {
width: ($gridWidth / $columns) * $rows;
float: left;
padding: $padding;
@include box-sizing(border-box);
}
.my-div {
@include drupalCols(4);
}
// This becomes:
/*
.my-div {
width: 33.333%;
float: left;
padding: 0 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment