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
Stuff & Nonsense has the sIFR headings missing. Looks a bit wierd. Nice article btw
This is another such a great collection of inspiring designs.
This is great, exactly what I was looking for! The perfect amount of inspiration for putting a magazine online.
Wow,great.I really liked Alex’s page.Soft,clean and useful.
Thanks for the collection.
COOL MAN!
thanx for this good collection
Great tutorial, I’m a complete css novice but this was easy to follow and tweak to suit my needs. A quick question: should the -900% text ident interfere with positioning the menu on the page? I seem to have to rely on absolute positioning coordinates, for example to center the menu next to an image at the top of my page.
Thanks!
thanks for this good collection
Thanks best collection
Another one that should be included in this list: http://www.thedailybeast.com/
It’s a great modern take on the newspaper grid. Love the use of color as a guide!
a lot of good stuff, nice!
Best way to explain to a learner. It spelts out the minischule of details that has to be kept in consideration while designing Grids.
Lots of awesome stuff here…loved it, and obviously some inpiration found here as well.
thank you!
nice, i bet coding all of that would be a night mare but worth it in the end though.
Good work. Thanks for sharing
It makes you wonder how some people come up with the inspiration for these sites in the first place, let alone code some of them…
This is really helpful. There’s too many examples around to do with certain popular graphical styles, yet few people take the time to get the grid structure correct.
Thanking you once more.
Wow, too much selection, really great layouts
thanks
This has made me think about re designing our site!