How to select the grid width in The Grid v2 template

Post 79 of 262

October 13, 2011Andreas ViklundLearn5 comments

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.

Using the 960px grid

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:

<body>

Using the 1200px grid

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:

<body class="wider">

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!

templates, the grid, tutorials

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.