V2 Marketing Communications Blog

Building Blocks: 4 CSS Grid Frameworks for Great Website Design

Written by Bryan Garrett on Tue, Dec 18, 2012

css grid frameworkI learned at an early age the usefulness of a grid system. I may not have known what one was at the time but it was something engrained into my subconscious. While playing with my matchbox cars I couldn’t just park them all willy-nilly like my friends. They had to line up in rows. If playing on the linoleum, they had to at least line up with the pattern. This may have also been a result of my undiagnosed OCD, but for this blog we’ll go with the grid.

The grid can be found in many everyday things. Sitting at my desk I notice a calendar, days broken out into rows and columns which makes for easy readability, and an organized layout. Tic-tac-toe, a series of three columns and three rows. That game consisting of black and red squares, checkers! A series of rows and columns for which I can see in my head but not the exact number. Cities plan their streets in a series of blocks which, seen from above, resemble rows and columns. Do you see a theme emerging?

So, what is this grid all about? By dictionary terms it's a network of squares on a map, any network of lines, a framework. In Internet terms, grid systems bring visual structure and balance to website design. Grids are useful for organizing and presenting information. A grid is nothing more than a series of intersecting horizontal and vertical lines spaced at regular intervals. Makes order out of chaos.

Grid-Based Web Design

Before we get into the specifics of the 960 Grid System, let’s take a look at grid-based design in general. The idea is certainly not something that originated on the Web. In fact, it stems from one of the oldest and most basic design principles: alignment.

Alignment is something you probably don’t even think about when viewing Web pages. It acts as the main structure for your design supporting the navigation, sidebars, headers and footers. Alignment allows us to make conscious decisions about how and where elements are placed on a page. Take for instance layout A versus B:

Grid layout for website design

Both of these images are simply a gathering of rectangles. Layout A seems fundamentally better than layout B. We can instantly recognize a pattern, accept it, and move on.

Layout B is not visually pleasing to the eye. There’s no clear pattern, or order to it. It just looks like a random assortment of shapes.

Grids are among the simplest and strongest ways to create order on a page. Now we’re getting somewhere.

The 960 Grid System

Before CSS3, it wasn’t exactly easy to break up a page into columns without getting into tedious math. The solution? Find someone else to figure it all out, make a helpful CSS document, and let you download it for free. Who is this kind person? Nathan Smith, creator of the 960 Grid System.

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. The 960 Grid System is simply a way to lay out websites using a grid that is 960 pixels wide which fits nicely on a majority of screens. The 960 GS comes in two primary variants: a 12-column grid and a 16-column grid that can be used separately or in tandem. There is also a 24-column version.

In the 12-column version, the narrowest column is 60 pixels wide. Each column after that increases by 80 pixels. So the available column widths are: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 and 940. Similarly, in the 16-column version, the narrowest column is 40 pixels wide and each column after that increases by 60 pixels. So the available column widths are: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 and 940. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns. The next two images are of the 12 column and 16 column grid. These are also found on Nathan’s website at www.960.gs.

12 Column Grid

16 Column Grid

The 960 grid system enables hassle free web development especially between the designer and the programmer. The 960gs website provides handy sketch paper for grid layout in the initial drafting stage as well as templates for programs such as Photoshop. Helpful rubylyth columns and guides overlay your Photoshop file so you know exactly how things will line up. Of course there is also CSS code, but we will cover that in a future article.

Helpful Grid System Links

There are many different 960 grid templates out there that can help you along your way. I’ve listed a few below to get you started.

The 960 Grid System

960 Grid

The one that started it all. A fixed 960 grid system. Download the CSS, sketch papers, templates, demos and tutorials. Everything you need to learn more about the 960 grid.

Blueprint

Blueprint

As they put it, Blueprint is a CSS framework that aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a handy stylesheet for printing.

Titan

TitanTitan uses the same CSS classes as the 960gs. If you’ve developed websites with 960gs, you can easily switch them to responsive web design in a matter of minutes. Responsive grids are those that reposition content with smaller screens.

Gumby Framework

Gumby CSS Framework

Advertised as the NEW responsive 960 Grid CSS Framework that you’re already familiar with. Gumby was built to be the most malleable grid framework you’ve ever used while still maintaining the familiarity and ease-of-use of the grid you’ve always used. Gumby’s grid system can be customized to fit any screen size or application. It includes buttons, forms, tabs, drawers and dropdowns to name a few.

This should tie you over till round two where I’ll delve into how to code for the grid. In the mean time, happy designing!

Image courtesy of nuchylee / FreeDigitalPhotos.net

Download the free ebook, The Essential Guide to Internet Marketing

Topics: graphic design, Website Design

You might also like these articles:

Subscribe to Email Updates

Get Social

New Call-to-action
How to Create an Effective Inbound Marketing Campaign, Free eBook Download
Get a Free Inbound Marketing Assessment

Most Popular Posts