The Grid template

Keep the layout in order...

This is The Grid version 2.0, an updated version of the first free website template from andreasviklund.com that was built upon a CSS grid system. Inspired by the 1KB CSS Grid and other grid systems, The Grid template has a 12-column grid based on either 60 or 80 pixels wide columns with 20 pixels of space inbetween. The two column widths give two layout width options, 960 pixels or 1200 pixels. To use the grid, you create a div with the class="row" and then place any number of divs with class="col" and a second class stating the width of the column (c1-c12) inside the row. The Grid supports nested rows which means that thousands of layout combinations can be created, from single-column pages to advanced magazine-style layouts. The template uses standards-compliant code.

About this example...

This file uses the wider layout, 1200 pixels. To use the 1200px grid, apply class="wider" to the body tag in the HTML. The column widths and the background image will adjust automatically when the "wider" class is applied, so you can switch between the 960px and 1200px options easily. It is also possible to add a script or a media query that switches between the 960px and 1200px widths depending on the screen resolution of the website visitor - a feature that may be added in a future version of The Grid template.

Want to use it?

Like all templates from andreasviklund.com, The Grid template is free to modify and free to use for any purpose. If you find The Grid template useful, please keep the footer credit link to help others find the template.

Related resources?

Tutorials, alternate versions, additions and articles about using this template and others, can be found on andreasviklund.com and on The Grid template page.

Theme versions?

If you convert this template into a theme for WordPress, Drupal, Joomla, Tumblr or any other CMS or blog service, please contact me. I would be happy to distribute theme versions of this template through andreasviklund.com.