If you are looking for inspiration for grid and column design, here is a nice collection of 32 column-based websites. These sites show how grid layout can be applied on various type of sites — whether a massive content editorial site or just a personal blog. Check out how the layout can be divided into 3 columns, 4 columns, a mixture of narrow and wide columns.
Editorial Sites
First let's check out some of the famous editorial sites. Can you imagine how these sites would be organized without a grid system due to their massive content?
- The New York Times
- National Post
- Guardian
- Times Online
- Frieze Magazine
- Wired News
- The Morning News
- Porfolio
- We Are Survival Machines
- UX Magazine
Grid in blog design
Here are some of the blogs that adapted the grid style. I have to specially mention Khoi Vinh, who played the big part in grid web design.
- AI Alex
- 5 Thirty One
- Subtraction
- Astheria
- Jeff Croft
- Hell Yeah Dude
- Jon Tangerine
- Mark Boulton Design
- The Technology Herald
- Gapers Block
Break out of the box
Column design doesn't mean you have to be within the box. See how you can break out of the box by using images to form unsymmetrical shapes.
- UC Berkeley
- J R Velasco
- Chrizdee
- AIGA Los Angeles
Columns on eye-catchy background
Getting bored of the white background? Here are some good samples of column layout on graphical background.
- 31Three
- A Tennessee Winter
- Sundance Film Festival
- Ungarbage
Boxes and Columns
Content can also be organized into evenly distributed columns and rows.
- Kineda
- Rainfall Daffinson
- Erskine Corp
- Stuff and Non Sense
Interesting designs…we’ve just redesigned our website and it would have definitely helped
It’s interesting how designs are changing to reflect the new social phenomenon. Hard corporate design is giving way to a more casual almost friendly blog type style. The question is, does this have a measurable effect on the businesses concerned?
These designs are great, I like how they are professional yet clear and accessible.
I never understand why newspaper websites have to be so packed with columns, boxes, and lines. It is so hard to focus to read on something.
They never understand the web. It is so destined to fail. I rather read then in feed reader due to the lousy packed design.
Excellent Tutorials! Thanks so much!
Fantastic designs, professional yet fun.
It’s interesting how designs are changing to reflect the new social phenomenon. Hard corporate design is giving way to a more casual almost friendly blog type style.
Hello,
This is going to be a big inspiration for a WordPress theme I’m brewing. Cheers!
Hi!,,,,,,This is a great post.. there is so much good inspiration here to have me designing for a while :)Thank you so much for sharing!,,,,,,,
well, yes mostly bloggers are now coming with this kind of columns themes and they like it too. :)