mezzoblue: Columns & Grids

By Chris Hester, at 13:42:03 on 2005-05-15.

2005-05-15T13:42:03-08:00

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

http://www.dexigner.com

By Adam Bouskila, at 20:56:44 on 2005-05-15.

2005-05-15T20:56:44-08:00

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.

By LintHuman, at 03:45:58 on 2005-05-16.

2005-05-16T03:45:58-08:00

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.

By Garrett, at 06:02:04 on 2005-05-16.

2005-05-16T06:02:04-08:00

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.

By kirkaracha, at 08:33:22 on 2005-05-16.

2005-05-16T08:33:22-08:00

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.

By Peter da Silva, at 07:26:53 on 2005-05-17.

2005-05-17T07:26:53-08:00

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?

By Menno van Slooten, at 21:08:35 on 2005-05-17.

2005-05-17T21:08:35-08:00

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.

By Joerg Petermann, at 22:58:12 on 2005-05-18.

2005-05-18T22:58:12-08:00

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

By Tony, at 05:43:01 on 2005-05-24.

2005-05-24T05:43:01-08:00

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

By Susanna, at 08:15:28 on 2005-05-31.

2005-05-31T08:15:28-08:00

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.