Skip to content

Instantly share code, notes, and snippets.

@jlong
Created December 17, 2010 06:28
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 jlong/744576 to your computer and use it in GitHub Desktop.
Save jlong/744576 to your computer and use it in GitHub Desktop.
Two, three, and four column layout mixins for Sass (requires Compass).
=two-column($width, $gutter)
$colwidth: ($width - $gutter) / 2
+clearfix
margin-left: -($gutter / 2)
margin-right: -($gutter / 2)
.column_1, .column_2
float: left
padding-left: $gutter / 2
padding-right: $gutter / 2
width: $colwidth
=three-column($width, $gutter)
$colwidth: ($width - ($gutter * 2)) / 3
+clearfix
margin-left: -($gutter / 2)
margin-right: -($gutter / 2)
.column_1, .column_2, .column_3
float: left
padding-left: $gutter / 2
padding-right: $gutter / 2
width: $colwidth
=four-column($width, $gutter)
$colwidth: ($width - ($gutter * 3)) / 4
+clearfix
margin-left: -($gutter / 2)
margin-right: -($gutter / 2)
.column_1, .column_2, .column_3, .column_4
float: left
padding-left: $gutter / 2
padding-right: $gutter / 2
width: $colwidth
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment