Rob Spangler robspangler
robspangler
/ simple-grid-percentage.css
Last active
December 21, 2015 14:29
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>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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%; } |