Skip to content

Instantly share code, notes, and snippets.

@brenna
Created March 26, 2015 21:38
Show Gist options
  • Save brenna/7e0eb6861755fc21abcf to your computer and use it in GitHub Desktop.
Save brenna/7e0eb6861755fc21abcf to your computer and use it in GitHub Desktop.
mixins
// Block grids
// ----------------------------------
// create an n-up block grid
// works well for > n unequal height items
// use @miixn block-grid on parent elem,
// @mixin block-grid-item on children
@mixin block-grid($gutterWidth: 25){
font-size: 0; //kills inline-block ghost space
margin-left: -#{$gutterWidth}px;
}
@mixin block-grid-item($n, $gutterWidth: 25, $fontSize: '14px'){
font-size: $fontSize; //reset parent's zero font
width: percentage(1/$n);
display: inline-block;
vertical-align: top;
padding-left: #{$gutterWidth}px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment