0
Posted November 3, 2012 by Spyros in Cascading Style Sheets (CSS)
 
 

How to Set No Margin(No Blank Space) Between gs960 Grids

960GS_Screenshot
960GS_Screenshot

I have been recently using the very nice gs960 CSS stylesheets, which allow for easily creating multicolumn designs. In my project, i needed to have the standard gs960 version that uses a 10px margin between two columns, but i also needed to have a 0 margin as well. What i did is edit the gs960 css and add some new CSS lines, to reflect my new ngrid style. The main difference is that each grid gets 20px more and the margin is now set to 0px both right and left :

.container_12 .ngrid_1 {width: 80px;}
.container_12 .ngrid_2 {width: 160px;}
.container_12 .ngrid_3 {width: 240px;}
.container_12 .ngrid_4 {width: 320px;}
.container_12 .ngrid_5 {width: 400px;}
.container_12 .ngrid_6 {width: 480px;}
.container_12 .ngrid_7 {width: 560px;}
.container_12 .ngrid_8 {width: 640px;}
.container_12 .ngrid_9 {width: 720px;}
.container_12 .ngrid_10 {width: 800px;}
.container_12 .ngrid_11 {width: 880px;}
.container_12 .ngrid_12 {width: 960px;}
.ngrid_1,.ngrid_2,.ngrid_3,.ngrid_4,.ngrid_5,.ngrid_6,.ngrid_7,.ngrid_8,
.ngrid_9,.ngrid_10,.ngrid_11,.ngrid_12{
display: inline;float: left;margin-left: 0px;margin-right: 0px;
}

Now, every time i want to use spaceless grids, i use ngrid instead of grid, and it works fine.


Spyros