New template: The Grid

Post 93 of 262

A new template has been added to the website template page: The Grid. It is the first template I release which is using a grid layout system, and it provides a lot of freedom for template users to create advanced multi-column layouts. As always, I have kept the code as short and simple as possible to make it easy to work with. Four layout examples have been included to give you an idea about the flexibility of using a grid system. More layout examples and a tutorial about how the grid system works (and how you create the layout you want) will be published next week.

This is what The Grid template looks like. To download the template, click the screenshot below. To read more, see a live demo or screenshots of the different layout examples, go to the The Grid template page

.PSD source files

In case anyone would want to modify the background or the sample header image that is included, here is a .zip containing the .PSD source files for both the header and the background images: (242 KB)

, , ,

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.


Jason ColeSeptember 2, 2011 at 05:52Reply

Shiny. I’ll see what I can get up to with this.

Terese NewmanOctober 4, 2011 at 22:20Reply

I am attempting to use The Grid, building the site in Dreamweaver CS5 (Mac). The odd thing is, as I’m working on individual pages (for instance, right now I’m making the index.html), when I try to change the text, the whole block of text highlights in the design section. So if I want to change a single word, the whole block is highlighted, and I’ve discovered I am forced to go into the code to write the text or make any kind of changes or modifications. Is this normal? I really like the simplicity of the layout. Thanks.

Terese NewmanOctober 4, 2011 at 22:28Reply

…followup…It is the “Index.html, Index2.html, and Index3.html” that seem to be the offending pages. Your Index4.html does allow for edits on the design side of Dreamweaver.