Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Columns & Grids

May 13, 2005

The difficulty of grid systems in web pages, the compromise of columns.

I seem to quite often go back and forth between creating organic layouts with intuitive proportions, and creating a grid that I can hang my various elements on. Lately I’ve been more interested in the latter. Frequently I’ve caught myself calculating in my head what 750 divided by 3 minus two 10px margins equals.

One of the larger problems in working with grids in web pages is that you often can’t do much about vertical proportions. Often your content is dynamic, so the best you can do is approximate. Throw in any compensation for font scaling, and it’s easy to lose any semblance of control over the way a layout expands downward.

So the focus is usually on the horizontal layout, which usually means columns. (Incidentally, if you’re ever wondering why fixed layouts are so popular amongst designers, this has a lot to do with it — it’s awfully difficult to build any coherent form of grid when you lose control of proportions in both dimensions at once.)

1 Column

1 Column Layout Example

As simple as it gets, the one-column layout has been around since the beginning of the web. 1994 gave us a grey background and black Times in a single column running down a browser window, the most primitive one-column possible (although calling it that is a bit of a stretch. See: an early Yahoo). It has evolved nicely since then, and some recent redesigns are putting it to good use. (See: Garrett Dimon)

2 Columns

2 Column Layout, equal-sized columns

The realm of the blogger. Two columns are utilitarian and perfect for presenting content and further navigation/archives/whatever side-by-side. Popular variations include the fixed sidebar/liquid content area setup (See: Malarkey) and the fixed-width, narrower sidebar/wider content area setup (See: the sadly now-defunct Weightshift).

2 Column Blog Layout

Layouts with 2 columns or more force a choice that a single column doesn’t: equally sized columns, or varied widths? Ratios are important, and certain width combinations are more aesthetically pleasing than others. It’s pretty hard to go wrong with 1:1 widths (or 1:1:1, or more). It’s a little more difficult to choose non-equal sizing because there are no hard rules. You could pick a 5:8 Golden ratio (in a 750 pixel wide layout, translating to roughly 290px and 460px), a 3:4 ratio (320px and 430px), a 1:2 double square (250px and 500px), and so on. (Pleasing rhythmic proportions often share proportions with musical time scales, as you may have noticed.)

3 Columns

3 Column Layout, typical blog dual-sidebar format

Once you add a third column, the options increase. What a third column enables is the possibility of a virtual column, one that is not absolutely defined in the layout, but exists by proxy. Consider this site, for example. On all pages with a sidebar, it appears to be a two-column layout. On the home page, the larger red panels imply the existence of three equal-sized columns. I haven’t pushed the possibilities of this third column yet, but this design does allow for it if I ever feel so inclined.

3 Column Layout, overlapping elements

As well, 3 column layouts allow for overlapping elements. Consider the home page of Stopdesign, and how the leftmost two columns are joined by the overlapping featured article. Of course, it’s theoretically possible to pull this off with only two columns, but I rarely see it done on the web. A 2 column layout has traditionally meant that the content of each column lives in that column, never to overlap.

4 Columns

4 Column Layout

4 column layouts are where screen size constraints start becoming more obvious. With only so many pixels per column, it rarely makes sense to rely on 4 equal-sized, side-by-side columns on a site. StyleGala redesigned last year to a widescreen format with 4 equal columns; to compensate, a narrower version exists with 3 columns instead.

4 Column Layout, unequally-sized columns

Not to say the columns need to be equally sized. Josh Dura appears to have made a stab toward a smaller-sized 4 column layout, with 3 skinny columns on either side of a larger content area. (Although there’s plenty of overlapping going on, so in some places it’s 2 columns, in other places it’s 3. Whew!)

More Columns

4 columns is hardly the limit though, even within sensible designs that don’t push the width requirements too hard. Consider B. Adam Howell’s redesign — your screen size determines how many columns you see, up to six. And the entire thing stretches to fill the screen, so it’s resolution-independent.

Subtraction.com's 8 Columns

And you knew I was getting to Subtraction eventually, right? Khoi’s layout turned heads for more than just its black-and-white sparseness. Subtraction uses an equal-sized 8-column grid, with intelligent overlapping and column arrangement to make it seem quite a bit less.

What’s particularly clever about Subtraction is how all elements on the page intentionally fit into the grid. Whether it’s the Quick Access panel on the right spanning 2 columns, a content image spanning half the page (4 columns), or a caption sitting in the left-most column, every element on the page has a specific place within the grid and it all meshes wonderfully.

Further Reading


1
Oliver says:
May 13, 01h

May I add, that columns are a form of hierchy in a page. Represented by physical blocks, each “column” can be identified as a section of content. 3 columns and overlapping content can simply be interpreted as 2 columns with sub sections in the second column.

2
Justin P. says:
May 13, 01h

This one is really an eye opener for me. I’ve been visiting B. Adam’s site for a while now and I really like his new design (as with the fact that the graph is dynamically generated). I never even paid attention to the fact that at a 1280 width you get to see 6 columns, wow!

I like how the columns appear as your browser window gets larger. If you’re running a small browser window, you only get to see the last day of entry summaries. Bigger window, more entries summaries.

Then Subtraction, never even noticed all those columns in there. At first glance it seems like a normal two-column layout (or maybe three). Ahh, but wait. *scrolls down* Would you look at that, how cool.

A consolidated list of layout styles and examples in use. Very good article Dave, another one for the developer resources.

3
Yoko says:
May 13, 02h

“(See: the sadly now-defunct Weightshift).”

Am I just out of the know or is Weightshift acually now defunct?

Nazarin, of Weightshift, says he’s discontinuing his MEMO design journal (http://www.weightshift.com/memo/old/2005/05/04/for_the_memories). Could you have just misread that post?

4
Dan says:
May 13, 03h

Man Dave, this is an eye opener! Between Josh Dura’s overlapping and B Adam’s dynamic columns I’m going to have a fair bit to chew on for the next few days at least. I’ve seen columns done so VERY wrong on so many occasions, it’s nice to see a decent recap of how to do them right.

5
jason says:
May 13, 03h

Outstanding article, Dave! I’m looking to redesign a heavily trafficked and way-too-cramped corporate site right now and this article is just the type of influence I’m hungry for.

Thanks once again for an intelligent insight.

6
Joey says:
May 13, 04h

Interesting read - this is a topic I’ve thought about as well.

One thing I’ve wondered, though … I started thinking through at one point if there was a way to create more of a true grid system using CSS. You know, be able to reproduce any tabular structure. But then it hit me - this is the Web. Should we really even be after a grid layout for most sites? Our viewport is not fixed, like print. As you pointed out, we rarely have control over vertical proportions. I think this is a key distinction between print and Web design, and why columnar layouts are so popular. It’s simply the nature of the beast. :)

7
Rachel C says:
May 13, 10h

You might be interested in this post I did,

http://cre8d-design.com/designerblogs/2005/seven-layouts/

- it shows how 7 different web designer blogs are laid out.

8
jordan says:
May 13, 10h

The whole idea of columns is even more fun now that Gecko 1.8.something supports auto-flow/wrap/whatever columns (see http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html for details).

9
Zach says:
May 13, 11h

Excellent article. I like the one column layout (and use it myself), but I guess what works best for designers depends on the type of information they have to display.

What often happens, though, is that websites with more columns than they really need often add content in their extra columns just to take up space, this is especially prevalent among weblogs.

You really don’t need to have your blogroll on every page; it is there to fill the empty column.
.

10
Casey Gollan says:
May 13, 11h

One column may be simple, but without pushing down the content, where do you get in a header and other information? There’s too much information on most websites now to allow for less than 2 columns. My irk with Garrett’s site is constantly scrolling down to get to the navigation. How would you handle one column?

11
May 13, 11h

“where do you get in a header and other information”

On my weblog linked above (and in Dave’s dailies - thanks!) I do the one column thing and assume that the primary reason people are visiting is to view the latest content, which is first thing on the page. The menu and such are below.

That’s a big assumption but it’s worked out fine so far.

12
May 13, 12h

The most complex and impressive columnar all-CSS layout I’ve seen is that of http://www.lawrence.com , by Dan Cox.

(Disclaimer: I work for that site. But I had nothing to do with the design — it was all Dan.)

13
May 13, 12h

Great, but how do we get away from such steril rigid designs? and where are the grids? The one thing tables gave us was a grid. This is great for structuring information, but how do you start integrating imagery into these designs?

14
May 13, 12h

I really like sites that can do consistent branding across different layouts. As you say, this one shows two columns most of the time, and only one on the article pages.

I rather like Matt’s, though— basically single column, but with a floating sidebar. http://photomatt.net

15
May 14, 02h

Ryan Oswald said:
“Great, but how do we get away from such steril rigid designs? and where are the grids? The one thing tables gave us was a grid.”

I just finished a post (http://www.mennovanslooten.nl/?p=16) about creating grid-based layouts in CSS (I call them panel-based) for webapplications.

Joey said:
“But then it hit me - this is the Web. Should we really even be after a grid layout for most sites?”

Definitely not. But they can be very useful for webapplications like webmail interfaces.

16
Adrian says:
May 14, 12h

My biggest problem when trying to design my site, is the fact I have limited space. I have a certain volume of information I want displayed when someone hits my home page, and that volume of information is too large for the amount of space I have. I probably need a redesign and to be more critical of what goes in the columns.

The other problem I have is at 1024, I can almost fit everything into three columns. At 800 it’s impossible, 3 columns get to small.

My eventual solution was to make the 3rd column dynamic. At 1024 you get 3 columns. At 800 you get two columns with the items in the 3rd column rearranging themselves into the two column order. I used floats to do this and it’s almost ideal, except that one long side item can cause a lot of space to appear next to it. I solved some of that by moving to float:right instead of float:left.

It’s not perfect but it means 800px users (about 25% of my readers) don’t get shafted, and I don’t need to resort to JS to do it.

17
dan says:
May 15, 01h

I’ve been working on ideas for a new site design and I can’t help thinking how cool it would be to take a step back from the rigid template-based layouts of today and got after something more like Jason Kottke’s old http://www.0sil8.com

18
Chris Hester says:
May 15, 01h

7-column Design Portal that seems to work well here:

http://www.dexigner.com

19
May 15, 08h

Dexigner’s 7-column design is too mind-bogging. It is confusing to look at and the design is not effective. White space is beautiful.

http://www.penandthink.com/niggle/ is quite effective as a one column layout at the top and it only presents one article at a time. On the other hand, I dislike the dark colors that inhibit the bottom of the front page. Although, I believe Joseph meant to display the real important content at the top with a fresh and eye-pleasing look and the less important content at the bottom with a less pleasing feel to it so the visitor focuses on the newest addition to Joseph’s website.

20
LintHuman says:
May 16, 03h

Discussion on the use of grids, columns, proportion and such like on the Web is growing at the moment. Mark Boulton - http://www.markboulton.co.uk/journal/ - has written some interesting posts on these matters, as well as some very succinct articles on typography, very much an influence on grids and layout. I’m getting more interested in this as well, particularly how to apply what appears to be rigid (grids) to a fluid medium (the Web) using CSS.

Most current columnar layouts arrange distinct content types into sections. Future CSS3 multi-column properties - http://www.w3.org/TR/2001/WD-css3-multicol-20010118/ - are more to do with allowing content to flow from column to column, which stikes me as an unnecessary attempt to emulate print design: scrolling from the bottom of one column to the top of the next to continue reading the same item doesn’t make sense on the Web.

Another fascinating resource to add to your list, Dave, is Thinking With Type - http://www.thinkingwithtype.com/ - by Ellen Lupton.

21
Garrett says:
May 16, 06h

Casey - I msyelf am still having a hard time with having to scroll. I’ve experimented with some solutions in Photoshop, but I’m just not happy yet with the right solution.

Additionally, one column does not preclude navigation at the top of the page by any means. Joseph and I both chose to do that to focus on the content. I think for most people that it would probably make sense to have it at the top. Joseph actually brings the navigation back to the top on sub pages and I think it works quite well. Either way, they are personal sites and a good place for us to experiment.

Dave - Thanks for the mention.

22
May 16, 08h

A List Apart did an article (http://www.alistapart.com/articles/flexiblelayouts/) on using CSS to make a grid-based layout. There’s an example page (http://www.donkeyontheedge.com/ala.html) on the author’s site.

23
May 17, 07h

What I would really like to be able to do in CSS is to pick up an idea from the Tk GUI toolkit, and have a selection of layout engines. In Tk you have three layout engines: the placer, the packer, and the grid. The packer is like your typical CSS layout, the placer is like absolute positioning, and the grid is like tables. You can mix and match them. And the packing algorithm seems a lot simpler and easier to use, even if you don’t use the grid placer.

Is there anything in future CSS that addresses this?

24
May 17, 09h

Peter da Silva said:
“The packer is like your typical CSS layout, the placer is like absolute positioning, and the grid is like tables. […]
Is there anything in future CSS that addresses this?”

Well, in CSS we of course already have the normal flow (like packer?), absolute positioning (placer) and various table-like layout properties for ‘display’ (http://www.w3.org/TR/REC-CSS2/visuren.html#display-prop) that should allow us to create table-like layouts using semantic HTML. (should, but it’s not supported by that one browser)

The problem is, what made tables originally so cool were the possibility for ‘colspan’ and ‘rowspan’. These concepts weren’t translated to their CSS counterparts which makes it pretty useless in my opinion. There seem to be no changes planned for CSS3 so don’t get your hopes up.

25
May 18, 10h

Thank you for the article and the interesting discussion. Inspiration - time to think about it.

26
Tony says:
May 24, 05h

Using css column layout, how do you span columns on occassion, where an element, say an image, will span across multiple columns?

27
Susanna says:
May 31, 08h

This is one of those things that seems obvious in retrospect, but was a big “Ah-ha!” moment for me. Reading this article, I realized that I have been laying out sites from the back end, based on how many columns of which content go where, when I should be laying them out from the front, thinking visually about grids and, you know, actual design stuff.