16 March 2010 | Team Tamar

I’m livin’ in a box… a CSS grid based box

Following on from a previous post about whitespace and the integral part it plays in design, this post is about the use of grids and the focus on layout options and usability / readability.

Grids are simple things really, a series of invisible horizontal and vertical lines that create a frame, outline or margin within a space for the purpose of alignment. They are traditionally used in publishing to help align columns of text and images in a visual appealing way. This also aids readability.

“For best legibility, typographic manuals suggest that columns should contain roughly 60 characters per line.” – Wikipedia

The web is the new publishing platform.

From social media to traditional media making the transition, the web is full of rich content which needs to be cared for in the same manor. The content is no less important and may now in fact be more important with the fast-paced disposable culture the web has created. If you have content that you want to be read, it needs to be appealing to read. The human eye picks up on even the most subtle details and the brain mentally divides whatever you’re looking at into sections or blocks to easier processing. If understood correctly, designers can facilitate a much better reading experience for the user simply by organising their content into sections.

An example would be a simple two-column layout for a blog. One column for navigation on the left and another wider column for the body copy on the right. This simple division means that the body copy is likely to be read first as it is larger and more dominant on the page but the type of content in the smaller column will be interpreted as an aid to the content in the larger column. This is now considered convention and has reinforced this schema in the unconscious minds of internet users aiding in their use of sites and making them even more aware of content location.

Taking this a step further you can have multiple columns to show different types of content and even split similar content into even more well defined groupings. For this to work there isn’t actually any need for visible margins or design elements, the eye picks up on and follows the invisible margins of the content.

The site below is http://www.faustltd.com/ which only has a logo and one image yet looks visually very well arranged and appealing due to the left aligned text and the column split.


The only time this is not the case is if the content is aligned to the centre rather than to the left or right. This is a problem as the reader cannot know for sure where the next line of content will start and as such, will take extra time to read the content in a way that is unpleasant. This is still fine for headings and single lines of text or non-sentence based text.

What does this mean?

Taking this into consideration we can apply simple publishing methods to the web. The most obvious is to split long or different types of content into columns or sections. Newspapers frequently use complex column structures to break up different stories of different lengths. Moving on from this you can increase the number of columns within the sections and have text flowing from one to the other. The current standard of the web is such that Javascript is needed to fulfil this but CSS3 is just around the corner and has just such functionality.

What else?

You’re not just limited to text. Other design elements can reinforce the grid such as images, visible structural lines and even background images. As long as the main lines follow a grid, elements can extend beyond and can create a very aesthetically pleasing layout. A common theme is to have a grid layout with a featured image at the top extending slightly outside of it’s container. This happens simply because the design has both a formal grid based layout and some freeform graphics softening the edges.



If you didn’t notice grids before, you will now

Chances are, if you’re not a designer, you haven’t really thought about the layout of a web page but you will have noticed if a design is displeasing and if it’s difficult to use. Now you understand the power of the grid you will see them everywhere.

If you are a designer and want to get to grips with CSS based grids then happy birthday as listed below are a few top tools to help you out.

Tools to help you out

Let’s start with some frameworks.

960 Grid SystemThe 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem”

1kb GridOther CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn’t require a PhD? Meet The 1KB CSS Grid.”

For a framework that goes beyond the standard grid templates and moves into typography then the easiest to use is Grid Designer 2. It allows you to set (and visually see) the grids based on your inputs as well as letting you customise the fonts and sizes used in each column.

Another option is to use a Javascript to do the work for you. There is a very elegant implementation here http://blog.creativityden.com/fluid-grid-using-jquery/

The last tool is a javascript bookmarklet that you can drag to your bookmarks bar (once you’ve visited the link it will explain how it works) and overlays a transparent grid over whatever web page you are on. You can even adjust it!

960 Gridder

You can create some really nice effects using a grid. Have a look for yourself.







Team Tamar

  • http://www.faustltd.com bob faust

    Thanks for the featured mention. I really appreciate it. Check out our new blog launched today. http://blog.faustltd.com/