Skip to content

Instantly share code, notes, and snippets.

@mwanberg
Last active December 21, 2015 11:48
Show Gist options
  • Save mwanberg/6301034 to your computer and use it in GitHub Desktop.
Save mwanberg/6301034 to your computer and use it in GitHub Desktop.
Make elements align in a grid, regardless of height. Apply to elements you want as grid items. This assumes divs, but can be applied to anything, assuming the container horizontal margins have been set to 0 and you're using "box-sizing: border-box". $cols = The number of columns you want $margin-right = Margin-right, should be in percent, defaul…
// Make elements align in a grid, regardless of height
// Apply to elements you want as grid items
// $cols = how many columns you want
// $margin-right = margin-right, should be in percent
// $ie8-height = an explicit height for all the elements, "off" by default, only applied to IE
@mixin gridify($cols, $margin-right: 5%, $ie8-height: auto) {
// Math for widths, margins, and clears
$width: (100% / $cols) - $margin-right + ($margin-right / $cols);
$ie-width: (100% / $cols) - $margin-right;
$clearnum: $cols + 1;
// Default styles for each grid item
clear: none;
display: block;
float: left;
margin-right: $margin-right;
width: $width;
// Resetting from any previous uses of this mixin
&:nth-child(odd),
&:nth-child(even) {
clear: none;
margin-right: $margin-right;
}
// Clear the rows
&:nth-child(#{$cols}n+#{$clearnum}) {
clear: left;
}
// Remove margin-right from last column
&:nth-child(#{$cols}n+#{$cols}) {
margin-right: 0;
}
// Fix for IE8 since it can't handle :nth-child()
.lt-ie9 & {
height: $ie8-height;
width: $ie-width;
}
}
@EvanLovely
Copy link

Ahhh, I know why I couldn't find this: you made it a Gist, and not a GitHub Repo!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment