These actions will create a Photoshop document ideal for laying websites out in 12, 10, 8, 6 and 4 columns.
30 Grid-Based WordPress Themes
In this article we have 30 WordPress themes have been developed using a popular CSS Grid Frameworks such as the 960.gs, Blueprint, YUI2 and The Golden Grid.
Design & Build a Grid Based Web Design with CSS
Step by step walkthrough of the design and build process of a grid based WordPress theme. From the initial Photoshop concept, through development.
Sushi & Robots
Beautifully personal portfolio by Jina Bolton that reveals the site grid and baseline grid.
Bisgrafic
Lovely grid site design by Barcelona based Bisgrafic.
Web Design with Grids
People, including myself are building sites using grids. Now it seems to me that when you’re designing in a browser you want to be able to follow the grid’s principals all the way through the process.
Fluid Grid
A web grid system that allows designers to use the screen real estate on large monitors and retain great design on smaller ones.
#grid
A tool that inserts a layout grid in web pages, allows you to hold it in place, and toggle between displaying it in the foreground or background.
Grid Based Designs
A gallery showcasing some of the world’s best websites designed based on a grid.
The Golden Grid Template
A PSD template based on the CSS framework The Golden Grid by Vladimir Carrer.
Eternal Network
Lovely minimal grid based site design that’s reminiscent of old computer paper.
Fluid 960 Grid System
A jQuery based fluid grid system template based on Nathan Smith’s 960 Grid System. Allows multiple layouts including 12 or 16 fluid columns and 12 or 16 fixed columns.
Neutica+
Neutica+ is a WordPress theme that features a strict, grid based design mixed with clean typography.
Grid-based Layout
A grid is a technique that comes from print design but easily be applied to web design as well. In its strictest form a grid is literally a grid of X by Y pixels.
Designing for the Web
A Practical Guide to Designing for the Web has written explanations of the core principles of graphic design in relation to the web.
Evo4 CMS WordPress Theme
A WordPress theme based on a 4-column grid system.
Adaptive Grid System based on the Golden Section
A two column grid system based on Mark Boulton’s Adaptive Grid Systems article.
Making a Perfect Grid-aligned Website using Gridfox and Firebug
Have you ever sliced a layout, only for it not to be grid-aligned once it’s scripted?
45+ CSS Grid Systems, Layout Generators and Tutorials
In this article tripwire magazine presents a large collection of CSS Grid Systems, online generators and tutorial on how to use these in your design.
Designing with a Grid
I wanted to try and give some insight on how I created Version Four using a grid, and how I went from wireframes to the finished website you see here.
Designing With Grid-Based Approach
Smashing Magazine takes a look at over 50 articles about grid-based designs and selected some of the most important and interesting facts.
Baseline
Baseline is a CSS typographic framework that makes it easy to develop a website with a pleasing grid and good typography and uses a “real” baseline grid as its foundation.
Taking the Grids on the Web
An article by Italian designer Andrea Peltrin on how to effectively use grids for web design.
nP: Grid Generator
An online grid generating tool that pumps out the CSS source code as well as a downloadable png file of your grid.
NineSixty (960 Grid System)
NineSixty is a Drupal theme that is based on the 960 Grid System.
DixonBaxi
UK based creative agency, DixonBaxi, has just launched a new site designed on a beautiful grid.
Auer
A site by Dan Auer, a graphic designer from North Carolina, that allows you to view the sites grid.
1Kb CSS Grid
A lightweight grid system tool that generates a simple, clean and small CSS framework
Seven Smooth Steps to Superb Grids
While grid design is a simple concept, there are now so many tools and ways of doing it that it might get confusing for newcomers.
Area 17
Area 17 is a Brooklyn based studio with a gorgeous grid-based website.
Andrew Stewart Photography
Beautiful, simple, grid based site design for photographer Andrew Stewart.
CSS with Vertical Rhythm
This tool will help you compute CSS that has a consistent vertical rhythm.
Baseline Rhythm Deciphered
When this occurs, your page is said to have vertical rhythm — the text is easier to read than text that doesn’t line up, as it feels more cohesive and less disjointed.
Grid System Generator
The grid system generator will create fixed grid systems in valid css/xhtml for rapid prototyping, development and production.
Warm Forest Templates
Flash based templates that are designed with a strong focus on typography, grids and usability.
Variable Grid System
The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.
Cutting and Sewing Grid-Based Design
Discusses the steps taken when measuring and cutting a comp layed over a grid and turning that data into CSS.
Setting Web Type to a Baseline Grid
Another excellent article on the Dev Opera site covering baseline grids and how they can be applied to the web.
Grid Design Basics: Grids for Web Page Layouts
An article on the Dev Opera site on how to implement grids for the web through the use of CSS.
Fluid Grids
An experiment in creating a fluid grid system using CSS that resizes with the browser window.
Gridmaker for Photoshop CS4
GridMaker is a script for Photoshop which allows speedy development of simple grids.
Almost Modern
The Netherlands based studio Almost Modern have launched a new grid based site design.
Illustrator 974px Grid System (12)
By Neil Bradley. Adobe Illustrator file with a grid system for a 974px wide page that is divided into 12 columns and rows using the Rule of Thirds (Golden Ratio). Includes a 16px baseline grid.
The Golden Grid
The Golden Grid is a web grid system. It’s a product of the search for the perfect modern grid system. It’s meant to be a CSS tool for grid based web sites.
Redesigning Unit Interactive
Unit Interactive discusses the redesigned of their website which includes a section of the grid system used for the site.
BBC Visual Language
A downloadable PDF focusing on the redesign of the BBC website which includes a section of the grid used for the layout.
