Skip to content

Instantly share code, notes, and snippets.

@jefflau

jefflau/gridmixin.styl

Last active September 7, 2015 05:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jefflau/ae36e3444c2ce43f79a0 to your computer and use it in GitHub Desktop.
Save jefflau/ae36e3444c2ce43f79a0 to your computer and use it in GitHub Desktop.
Download ZIP
Stylus Grid Mixin using calc() to create grids with percentage widths, but pixel based gutters
Raw
gridmixin.styl
grid($columns, $gutter)
$width = 100% /$columns;
$marginDeficit = $gutter * ($columns - 1) / $columns;
float: left;
width: "calc(%s - %s)" % ($width $marginDeficit);
margin-right: $gutter
&:nth-child({$columns}n)
margin-right: 0;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment