22 Examples Of Different Grid Types On The Web

Posted: 10 Oct 2011 05:30 AM PDT

A few months ago I posted about 4 different types of grids common in design — the manuscript grid, the column grid, the modular grid, and the hierarchical grid.

One thing I failed to do in that post was provide website examples of each grid type. Alex reminded me in a comment that real world examples would be helpful and so here we are.

I did my best to accommodate, though do understand that with some of the examples below the type of grid being used is more my opinion than what the designer actually built the site on.

You can and should click each of the screenshots to see the live page as some of the images here have been cropped. The grid diagrams above each section will take you back to my original post on grid types.

Examples of Manuscript Grids

Manuscript grids have a primary structure defined by large continuous blocks of text surrounded by margins. You might think of them as single column grids.

They have a secondary structure that defines the location of secondary information like a running header or footer, footnotes and folios.

Consider the screenshots below with the above in mind.

Above is a page from Andy Rutledge’s Design View site showing a single article. You can see a large block of text with margins and secondary information in the margins.

In the top margin is the site navigation and logo. The left margin contains the date of publication. At the bottom is a link to follow Andy on Twitter.

Not shown is a large footer in which Andy includes links to (I think?) every article on the site. Below these links is another footer area that serves as the running footer with basic copyright information.

This footer of links breaks the manuscript grid and shows the column grid the site is likely designed on, but I think we can still consider the page a manuscript grid in some respect.

The website of Oli Studholme is a good example of a manuscript grid. Seen here is the top of one of his article pages. Again what we see is a large block of text surrounded by margins.

Oli places the logo and a single link in the running header and the date of publication in the left margin. At the very bottom of the page (not shown) is a footer with credit and copyright information.

Above is an article on Jeffrey Zeldman’s site as viewed in Readability. Again large block of text surrounded by margins. Here only the header and footer have secondary content.

The header provides information about the article itself and the footer contains information to sign up for Readability. The icons to the left are part of the Readability interface.

Similar is my article above on the 4 grid types as viewed through Safari’s Reader feature. Only the top is shown, but the, by now hopefully clear, manuscript grid is evident.

Reader actually presents 3 different posts when viewing the one above. At the top of each page you can see the “Page x of y” and at the bottom is the line to subscribe you see below the content in the original.

Jason Santa Maria’s site is built on a column grid which we’ll see below. The 4 columns are evident in the footer.

However if you stretch things a bit like I did with Andy Rutledge’s site you can see a single block of text surrounded by margins, with both the top and bottom margin being used for secondary content.

Any time you see a single column of text on a web page you might want to consider it as a potential manuscript grid.

Examples of Column Grids

Column grids naturally contain multiple columns and the columns are used to present discontinuous information.

The columns could be dependent or independent of other columns and information can cross into multiple columns.

Discrete information can be presented in separate columns while still showing a connection.

Khoi Vihn is one the people responsible for bringing the conversation about grids online. The column grid he uses on Subtraction is most clearly evident in the footer (not shown in the image above) which presents 4 columns of links.

Khoi’s site is an 8 column grid layout with the center content filling 4 columns, the sidebar on the right filling 2 more. To the left of the content the information is sometimes confined to a single column and sometimes spans 2 columns.

Click through to the site and scroll down to the bottom. Then slowly scroll back up to really see the grid in action. Note too how the links in the main navigation bar also reveal the columns.

Mark Boulton’s Design site makes use of a 12 column grid. In the image above the left sidebar occupies 2 columns, the main content 5 columns, then a single column of space, and finally a right sidebar of 4 columns, for a total of 12.

If you click through to the site and visit different pages you’ll notice that not all pages follow the pattern described above.

For example the about page of the site begins with text spanning all 12 columns followed by an area of 5 columns of text on the left and 7 columns of images to the right, followed by the page being divided into 2 equal 6 columns areas.

Mark’s site is a good example of how many different configurations you can design within the same 12 column grid.

Joshua Porter’s 52 Weeks of UX is an interesting case. I’m not entirely certain there’s a column grid in play here.

2 columns of information are clearly visible and it looks to me like there’s a 5 column grid underlying the design, with the left visible column occupying 2 of the 5, and the main content area occupying 3 of the 5.

This may just be a site so well aligned to appear that it’s built on a column grid, but is actually a hierarchical grid.

Here again is Jason Santa Maria’s site. This time the site’s home page. Jason is using a 12 column grid, which will become clear if you look through his css file.

On the home page we see one column used for the publication date, five more for the article title and excerpt, and then six more for the image on the right.

Jason breaks this pattern at times as you move down the page, again showing the flexibility in the grid.

Helvetic Brands is another site I’m not 100% certain is using a column grid. It appears to be built on top of a 12 column grid divided on most pages into 5 and 7 column blocks.

It’s possible that like 52 Week’s of UX the alignment is simply so well done that it appears to be built on a column structure while in reality being designed as a hierarchical grid.

Examples of Modular Grids

Modular grids are like two dimensional column grids with both vertical and horizontal divisions to form a matrix of cells.

They work well for complex projects when various kinds of information need to be presented.

Content can occupy more than a single module in the matrix, as several modules are grouped together to form a larger field.

The UX Magazine site is a clear example of a modular grid in action.

If you look at the middle of the page the individual modules are clearly evident as they form an 8 × 7 matrix on the page.

Each module is approximately 120px × 120px with 5px gutters between them.

Notice how fields are formed to support content larger than any of the modules would individually allow. This makes the grid appear less regular and creates more interesting shapes and patterns within the design.

Perhaps not as quickly discernible is this modular grid from Nice Device.

Each small block of content is contained within a module while the background behind the colors breaks from the grid.

If you resize your browser you’ll find there are 4 vertical columns for wider screens and only 3 vertical columns for smaller screens.

Peter Jaworowski displays an interesting pattern by showing some modules in the grid and leaving others out.

The links to the right are contained in a 2 module wide field as is his name and associated information at the top.

For fun click through to Peter’s site and mouse over the visible modules. As you do each is replaced with the image you can see faded in the background behind each module.

The Biber Architects site used vertical modules approximately 115px wide by 200px high. The headings along the left edge are 2 module fields.

Again notice how additional interest is created in the design by leaving some modules and parts of modules empty.

The modular grid on Mike McQuade’s site should also be quite evident.

The grid is 4 modules across, with the leftmost column of modules mostly empty aside from Mike’s logo and the navigation below, each sitting in its own module.

This leftmost column remains fixed while the more apparent grid of modules to the right is allowed to scroll.

By now I’m guessing the modular grid in The Grid System website is jumping out at you. The modules are 145px × 220px with 20px gutters between.

What’s interesting is that by showing some, but not all flowlines (easier to see on the live site), the modules appear longer or shorter in different rows.

Notice how text at the top of each row of modules is tightly aligned, while the bottom of the text falls as the content demands.

Examples of Hierarchical Grids

Hierarchical grids are based more on intuitive placement of elements than a strict grid system of modules, columns, or rows. They can still be very tightly aligned and can be thought of as loose or organic grids.

They’ve been common on the web probably because designers with even a minimum of skill understand the need to align elements, while perhaps not yet understanding the benefit of using a more structured grid system.

As more web designers learn to use grids I suspect we’ll see less hierarchical and more modular and column grids online.

Elements on The Swish Life website are tightly aligned, but not with any grid I attempted to overlay on top.

Rows of information aren’t divided equally and across these variable rows, the column widths differ.

The above suggests a hierarchical grid, more organic than built on a rigid structure. At first glance it probably comes across as a 5 column grid which is a testament to the intuition of the designer.

The Teaching History website is another where elements align well, but don’t appear to lie directly on a grid. Alignment and proximity help to create a visual hierarchy throughout the design.

Note the extra space after the 5 image thumbnails and the jump between 3, 4, and 5 “columns” in different “rows” of content.

While Readability presents other site’s content on a manuscript grid, it’s home page is designed as a hierarchical one. Elements align and appear orderly, but in no consistent pattern across the entire design.

Different patterns and alignments exist on other pages of the site and the blog is presented as a manuscript grid with the familiar single column surrounded by margins.

My first instinct was to think the We Function site was built on a column grid. 3 “columns” of information are clearly present, though no column grid I tried to overlay on the site seemed to fit.

On closer inspection the rightmost sidebar is about 15px wider than the one to its left and neither appears to bear a mathematical relationship with the main content column, at least none I could quickly and easily determine.

The home page for Nine Inch Nails looks to be built on a 4 column grid as seen by the blocks on information toward the bottom. Once again though, I was unable to overlay a gird that seemed to fit the design.

When clicking through to other pages of the site things change, often dramatically from page to page, making me thinking the 4 column grid on the home page more intuition than strict adherence to a grid structure.

Also if you look back up at the hierarchical grid diagram above this section it looks not unlike the NIN homepage furthering my belief the grid here is hierarchical.

The one site I can guarantee is a hierarchical grid and not any of the others is the one above I hope you recognize. Given I built the site I can honestly say there is no underlying grid structure.

I did make conscious attempts to align elements though. For example the copyright information is meant to align with the rightmost sidebar as should the navigational tabs above.

Next time around I’ll be working with a more formal grid structure, but a few years back when I created the current design my knowledge of grids was much less than it is now.

Summary

I hope you find these examples of each of the 4 grid types helpful.

Again please know their characterization as one grid or another is mine and not necessarily that intended by the designer. While some of these examples are fairly obvious as being built on one of the grid types some are not so obvious, which I’ve tried to point out.

Regardless of how right or wrong I’ve been I do think the examples show that any of the 4 types of grids can work well online and that there’s quite a bit of variety in each.

Hopefully these examples also help illustrate some of the concepts of grids from my previous post.