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
Thanks
A little off topic but how do you keep a track of all the different sites that you refer to in posts like this? Surely they are not something you just stumble across when you get an idea for an article – are they?
@Elton – In case you don’t know, I also run Best Web Gallery. So, a lot of bookmarks are collected from Best Web Gallery.
Nick
Sireh Dan Cengkeh have creative use of rotating picture script and change it with random quotes. cool
Columns are great, but so is whitespace. Too many columns or too little spacing between columns tends to confuse visitors rather than aiding in the flow of the page. Unless a page is animated, it should usually follow the same top-left to bottom-right layout used in print design.
For those who want to experiment in grid or column layouts, check out blueprintcss.
Congratulations!!!
I love your site.
Thanks
Nice complication.
Lots of similar examples at Design By Grid:
http://www.designbygrid.com
I am Brazilian!
Eu adoro seu site!!!
Awsome list nick, i love it and thanks for sharing
Great collection. Useful examples.
Brilliant List. I love these sites. Some new ones I haven’t seen a few of these yet.
Great Post. Really good roundup of good uses of the grid. I like how you start conservative and then move to cases that break out of the grid in areas and use interesting backgrounds. Thanks.
Although I’m just starting to get the hang of implementing grids (I think), I have a good understanding of the power you gain from using them. I’ve seen many of the examples above before but will certainly check out the ones I’ve not seen. Some really interesting looking designs : )
Those are all very typical ways of applying a grid to a website. A grid can be (or at least should be) applied to any website or design. Columns can be filled with white space, and they be covered with excessive amounts of text (like you have shown above.) I don’t think this could have inspired anyone to think outside of the box and that’s a shame because grids are a really great way to start an excellent design.
Ahh, Grid designs give me the warm fuzzies. Learning how to structure designs around a grid was a pivotal experience in learning how to improve my designs. There’s a lot of lessons learned from grid alignment that transcend pure grid sites (and lets face it, the graphic designer part of all of us likes to break out from time to time!).
Thanks for taking all that time to compile example sites, it’s a great resource that I’m definitely bookmarking for the future.
Cheers
Hello! Thanks for the inspiration. I love the grids, and I’ve got lots more to learn about them.
Funny thing is. Me and my buddy started on this swedish xbox-community site back in 2006. We didnt think of grids when we got started with the design. The only thought was to have the desing kinda clean and organized. Now aftewards that i got around reading more on grid-design I’ve realized that the site actually very griddy indeed. Truly a happy kind of accident. :-)
check it out… http://www.xboxer.se.
Good compilation and very inspirational.
Thanks for the feature, we don’t use grid layout as a form of trend, we use it as a form of information architecture. Very much so like NYTimes.com, Khoi Vinh I believe is the design director at NYTimes and would have much to say about the Web site.
Very neat stuff, everyone should be interested in. Thanks again
Awesome list!
nice, inspiring post.
Useful article as always, I’m starting on a redesign for the website I run and need some magazine-y/grid inspiration!