Skip to content

Instantly share code, notes, and snippets.

@robspangler
Last active December 21, 2015 14:29
Show Gist options
  • Save robspangler/6320183 to your computer and use it in GitHub Desktop.
Save robspangler/6320183 to your computer and use it in GitHub Desktop.
Grid frameworks are generally way too bloated. This is a 12 column grid based off of 960px with 20px gutters, converted to percentages (so it works in any sized new or pre-existing layout). Sample:<div class="row"> <div class="column eight">Eight Columns</div> <div class="column four">Four Columns</div></div>
/* Grid Columns -- 12 columns based off of 960px with 20px gutters*/
.row { clear: both; }
.row:before, .row:after {content: " "; display: table; } .row:after { clear: both; } /*clearfix*/
.row .column { padding-left: 1.041666666%; padding-right: 1.041666666%; /*gutter*/ float: left; }
.row .column.right { float: right; /*good if you have a sidebar and need to skip a column & float it right*/ }
.row .one { width: 6.25%; }
.row .two { width: 14.583333333%; }
.row .three { width: 22.916666666%; }
.row .four { width: 31.25%; }
.row .five { width: 39.583333333%; }
.row .six { width: 47.916666666%; }
.row .seven { width: 56.25%; }
.row .eight { width: 64.583333333%; }
.row .nine { width: 72.916666666%; }
.row .ten { width: 81.25%; }
.row .eleven { width: 89.583333333%; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment