How to select the grid width in The Grid v2 template

Post 79 of 262

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!

, ,

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.

5 comments:

RonOctober 15, 2011 at 13:51Reply

New version 2.0 is lot better as I can see…

Arne MejlholmNovember 7, 2011 at 15:46Reply

There seems to be an issue with safari (iphone / ipad) and the 1200 px width. The rightside looks weird. 960 px version works fine.

Andreas ViklundNovember 8, 2011 at 03:03Reply

Ok, I’ll look into it. Thanks for the hint!

KortingDecember 14, 2011 at 23:18Reply

960px version works fine here!

Bartek SzkurlatJanuary 3, 2012 at 11:06Reply

Works fine for me too!

Menu