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.

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.

About this example...

This file uses the default 960px layout width. To use the 1200px layout width, apply class="wider" to the body tag in the HTML.

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.