Skip to content

Instantly share code, notes, and snippets.

@teeli
Last active December 22, 2015 07:48
Show Gist options
  • Save teeli/6440016 to your computer and use it in GitHub Desktop.
Save teeli/6440016 to your computer and use it in GitHub Desktop.
Couple of simple mixins to help with responsive grids in SCSS
/*
* Simple grid system
*/
@mixin clearfix() {
*zoom: 1;
&:before,
&:after {
content: " "; /* 1 */
display: table; /* 2 */
}
&:after {
clear: both;
}
}
@mixin grid-container($columns, $width, $margin) {
@include clearfix;
$item-width: ($width - (($columns - 1) * $margin)) / $columns;
$total-width: ($item-width + $margin) * $columns;
width: ($total-width / $width) * 100%;
overflow: hidden;
}
@mixin grid-column($columns, $width, $margin) {
$item-width: ($width - (($columns - 1) * $margin)) / $columns;
$total-width: ($item-width + $margin) * $columns;
width: ($item-width / $total-width) * 100%;
margin: 0 ($margin / $total-width) * 100% $margin 0;
float: left;
overflow: hidden;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment