Skip to content

Instantly share code, notes, and snippets.

@nicksheffield
Created February 27, 2013 05:33
Show Gist options
  • Save nicksheffield/5045399 to your computer and use it in GitHub Desktop.
Save nicksheffield/5045399 to your computer and use it in GitHub Desktop.
Column calculator in LESS
.columns_6{
@page-width: 960px;
@columns: 6;
@gutter: 30px;
overflow: hidden;
[class*='grid_']{
display: block;
float: left;
margin-right: @gutter;
}
.col(@num){
@gaps: @num - 1;
@colw: (@page-width - ((@columns - 1)*@gutter))/@columns;
width: @colw * @num + (@gutter * @gaps);
}
.grid_1{ .col(1) }
.grid_2{ .col(2) }
.grid_3{ .col(3) }
.grid_4{ .col(4) }
.grid_5{ .col(5) }
.grid_6{ .col(6) }
.last{
margin-right: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment