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
I think newspapers only want to get as much text on one stie as they could.
Cool. Great post. :)
This is going to be a big inspiration for a WordPress theme I’m brewing. Cheers!
a lot of good stuff, nice!
Best list ever! Seems like you checked my bookmarks. just kiddin’ ;)
Interesting collection, I always love your showcases of websites!
mmmmm, interesting, the old layout in a modern media,,,,mmmmm
Good collection of great examples. Thanks!
Damn, Nick. How do you manage to do that? I’ve been looking for some inspirational multi-columnar layouts recently, and BAM, you’ve just posted a load. Nice one.
thanks for this grid collection.
the structure of the editorial site would be very helpfull for my next work ;-)
Thank you for this, I am always trying to compare grid and box structures for websites, gives a great overview.
Thanks!
A lot of sites use the grid for layout, but I dislike when they don’t hold the grid structure up into the header. The content body is nice and structured but the header falls apart and everything is just put where ever it will fit. Khoi over at subtraction.com does a really great job of keeping the grid structure through the header, and I believe it makes the site design. oh and BTW Jeff Croft redesigned his site a couple days ago.
Great Post.
Guess that you spent a lot of time prepairing this stuff soo big thanks! Nice collection.
Del.icio.us list! I always want to read something like this.
very good thanks for sharing..
here is another good example http://www.3kolone.org/
Very very nice. I’ve ween a post like this before. I’m starting to become a huge fan of grid layouts. It’s the way to go if you grow.
Great post and will be checking in regularly for ideas.
I love grids! Thanks for the write up.
An amazing site.
Congratulations!
I was waiting for a post like this one since …. now I’m happy, thanks to you WDW …
keep it strong!