The new version 2.0 of The Grid template includes two separate grid layouts, one that is 960 pixels wide and another that is 1200 pixels wide. Both grids use 12 columns with 20 pixels of spacing, but the column widths are diferent. The 960 pixels grid use a column width of 60 pixels while the 1200 pixels grid use a column width of 80 pixels. Since both the included grids have a similar set up, you can use any of them with the layouts created with the template. The only thing that needs to be modified to switch between the two width options is the <body> tag.
The 960px grid is the default setting. To use it, keep the <body> tag free from additional classes, and just let it be written out as:
The wider grid is applied by adding a class to the <body> tag. The class, named “wider”, activates a part of the CSS which changes the grid width and all the relevant parts of the layout that are affected by the width. To switch to using the 1200px grid, modify the <body> tag to make it look like this:
No matter how the columns and rows are set up in the template, the layout and the background image will adjust to the width thanks to the body class. The exception is the header image which needs an additional edit of the HTML code. Change the header image filename by adding “-1200” to the file name, like this:
<div id="headerimage" class="col c12"> <p><a href="index.html"><img src="images/header-1200.png" alt="The Grid template" /></a></p> </div>
…and you are ready to use your layout in a wider format!
This article was written by Andreas Viklund
Web designer, writer and the creative engine behind this website. Author of most of the free website templates, along with some of the WordPress themes.