Lately I’ve been working with the marvelously easy to use and understand CSS framework, 960 Grid System. After getting started with it, I very quickly noticed that, while easy and efficient, it has a flaw. You absolutely can NOT extend your elements to end after a margin, touching the next grid element. And so, one becomes effectively shackled to having margins between any horizontally placed grid elements.
Here’s a quick Mod that I wrote that will allow you to negate that problem, without modifying the 960gs CSS itself. Also, it is important to note, that while this does allow you to push your grid class over the margin, you still can’t pull the next element back. Still, another mod could be written using the same flavor to accomplish that as well.
So, without further adieu, here it is:
960.overExtend.css
/* Modifies the 960gs to allow elements to carry over into the margins, so that they may snugly touch the next grid over. Simply use the appropriate grid, as you normally would, and then attach the additional overExtend class to it, to make it over extend into the margin. Example: <div id="myContainer" class="grid_5 grid_5_overExtend"> ... </div> */ /* Margin Mod 12 Col */ .container_12 .grid_1_overExtend { width:80px !important; margin-right:-10px !important; } .container_12 .grid_2_overExtend { width:160px !important; margin-right:-10px !important; } .container_12 .grid_3_overExtend { width:240px !important; margin-right:-10px !important; } .container_12 .grid_4_overExtend { width:320px !important; margin-right:-10px !important; } .container_12 .grid_5_overExtend { width:400px !important; margin-right:-10px !important; } .container_12 .grid_6_overExtend { width:480px !important; margin-right:-10px !important; } .container_12 .grid_7_overExtend { width:560px !important; margin-right:-10px !important; } .container_12 .grid_8_overExtend { width:640px !important; margin-right:-10px !important; } .container_12 .grid_9_overExtend { width:720px !important; margin-right:-10px !important; } .container_12 .grid_10_overExtend { width:800px !important; margin-right:-10px !important; } .container_12 .grid_11_overExtend { width:880px !important; margin-right:-10px !important; } /* Margin Mod 16 Col */ .container_16 .grid_1_overExtend { width:60px !important; margin-right:-10px !important; } .container_16 .grid_2_overExtend { width:120px !important; margin-right:-10px !important; } .container_16 .grid_3_overExtend { width:180px !important; margin-right:-10px !important; } .container_16 .grid_4_overExtend { width:240px !important; margin-right:-10px !important; } .container_16 .grid_5_overExtend { width:300px !important; margin-right:-10px !important; } .container_16 .grid_6_overExtend { width:360px !important; margin-right:-10px !important; } .container_16 .grid_7_overExtend { width:420px !important; margin-right:-10px !important; } .container_16 .grid_8_overExtend { width:480px !important; margin-right:-10px !important; } .container_16 .grid_9_overExtend { width:540px !important; margin-right:-10px !important; } .container_16 .grid_10_overExtend { width:600px !important; margin-right:-10px !important; } .container_16 .grid_11_overExtend { width:660px !important; margin-right:-10px !important; } .container_16 .grid_12_overExtend { width:720px !important; margin-right:-10px !important; } .container_16 .grid_13_overExtend { width:780px !important; margin-right:-10px !important; } .container_16 .grid_14_overExtend { width:840px !important; margin-right:-10px !important; } .container_16 .grid_15_overExtend { width:900px !important; margin-right:-10px !important; }
