Half measures for 1140px Grid by Andy Taylor
Last Updated on Thursday, 23 June 2011 11:17am Written by spunky Wednesday, 15 June 2011 06:13pm
Who uses 1024×768 resolution anymore besides your grandma, give me a break. Andy Taylor’s 1140px CSS Grid could be considered the new 960 grid. Although super handy 12 columns doesn’t quite cut it for tight spaces. So using the amazing trickery of maths, this additional CSS beefs it up to potentially 24 by adding “half” columns.
Appendage:
.halfcol { width: 2.425%; float: left; margin-right: 3.8%; }
.onecol.half { width: 9.175%; }
.twocol.half { width: 17.825%; }
.threecol.half { width: 26.475%; }
.fourcol.half { width: 35.125%; }
.fivecol.half { width: 43.775%; }
.sixcol.half { width: 52.425%; }
.sevencol.half { width: 61.075%; }
.eightcol.half { width: 69.725%; }
.ninecol.half { width: 78.375%; }
.tencol.half { width: 87.025%; }
.elevencol.half { width: 93.775%; }
Usage:
<div class="halfcol">Half a column wide</div> <div class="onecol half">One and a half columns wide</div> <div class="twocol half">Two and a half columns wide</div> <div class="threecol half">Three and a half columns wide</div> <div class="fourcol half">Four and a half columns wide</div> <div class="fivecol half">Five and a half columns wide</div> <div class="sixcol half">Six and a half columns wide</div> <div class="sevencol half">Seven and a half columns wide</div> <div class="eightcol half">Eight and a half columns wide</div> <div class="ninecol half">Nine and a half columns wide</div> <div class="tencol half">Ten and a half columns wide</div> <div class="elevencol half">Eleven and a half columns wide</div>
Aware this doesn’t cover the IE component, this is intentional because anything < IE9 sux.
Enjoy!
Nice work.
Possible typo — > Six and a half columns wide
[...] could always just use cssgrid.net it even has half measurements http://www.daftspunk.com/code/half-m…dy-taylor.html thats what i use anyway <div class="row"> <div [...]