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?

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.

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.

Columns on eye-catchy background

Getting bored of the white background? Here are some good samples of column layout on graphical background.

Boxes and Columns

Content can also be organized into evenly distributed columns and rows.

Useful Links

168 Comments

Anomym
Feb 20, 2008 at 7:26 am

I think newspapers only want to get as much text on one stie as they could.

Spencer
Feb 20, 2008 at 7:29 am

Cool. Great post. :)

Wallace Rodrigues
Feb 20, 2008 at 7:33 am

This is going to be a big inspiration for a WordPress theme I’m brewing. Cheers!

David Hellmann
Feb 20, 2008 at 7:37 am

a lot of good stuff, nice!

Kai
Feb 20, 2008 at 7:48 am

Best list ever! Seems like you checked my bookmarks. just kiddin’ ;)

Christina
Feb 20, 2008 at 8:38 am

Interesting collection, I always love your showcases of websites!

naran_ho
Feb 20, 2008 at 8:41 am

mmmmm, interesting, the old layout in a modern media,,,,mmmmm

Ramon
Feb 20, 2008 at 10:04 am

Good collection of great examples. Thanks!

Davey
Feb 20, 2008 at 10:34 am

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.

maize
Feb 20, 2008 at 10:36 am

thanks for this grid collection.
the structure of the editorial site would be very helpfull for my next work ;-)

claireinvisable
Feb 20, 2008 at 10:41 am

Thank you for this, I am always trying to compare grid and box structures for websites, gives a great overview.
Thanks!

Dylan B.
Feb 20, 2008 at 10:49 am

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.

bweb
Feb 20, 2008 at 11:07 am

Guess that you spent a lot of time prepairing this stuff soo big thanks! Nice collection.

SE7EN
Feb 20, 2008 at 12:11 pm

Del.icio.us list! I always want to read something like this.

giackop
Feb 20, 2008 at 12:28 pm

very good thanks for sharing..

Dejan Cancarevic
Feb 20, 2008 at 1:30 pm

here is another good example http://www.3kolone.org/

Foxinni - Wordpress Designer
Feb 20, 2008 at 1:30 pm

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.

Kerry
Feb 20, 2008 at 2:38 pm

I love grids! Thanks for the write up.

Khaled
Feb 20, 2008 at 4:52 pm

I was waiting for a post like this one since …. now I’m happy, thanks to you WDW …
keep it strong!

Elton
Feb 20, 2008 at 6:12 pm

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?

Nick La
Feb 20, 2008 at 7:38 pm

@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

neil
Feb 20, 2008 at 8:47 pm

Sireh Dan Cengkeh have creative use of rotating picture script and change it with random quotes. cool

Devon
Feb 20, 2008 at 10:24 pm

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.

rogerhaus
Feb 20, 2008 at 11:32 pm

Congratulations!!!
I love your site.
Thanks

Mubashar Iqbal
Feb 21, 2008 at 12:43 am

Nice complication.

Lots of similar examples at Design By Grid:
http://www.designbygrid.com

Thiago
Feb 21, 2008 at 9:04 am

I am Brazilian!
Eu adoro seu site!!!

bali web designer
Feb 21, 2008 at 12:24 pm

Awsome list nick, i love it and thanks for sharing

Braintrove.com
Feb 21, 2008 at 2:38 pm

Great collection. Useful examples.

Andrei Gonzales
Feb 21, 2008 at 5:19 pm

Brilliant List. I love these sites. Some new ones I haven’t seen a few of these yet.

Sean Hodge
Feb 21, 2008 at 7:37 pm

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.

Sam Hardacre
Feb 22, 2008 at 11:20 am

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 : )

CZephyr
Feb 23, 2008 at 9:15 am

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.

Chris Laskey
Feb 23, 2008 at 11:32 am

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

Robert
Feb 23, 2008 at 3:49 pm

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.

Katalog Stron
Feb 24, 2008 at 6:03 am

Good compilation and very inspirational.

hellyeahdude.com
Feb 24, 2008 at 1:56 pm

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

Lawrence
Feb 25, 2008 at 12:49 am

Awesome list!

ahnShev
Feb 25, 2008 at 4:11 am

nice, inspiring post.

Rowan
Feb 25, 2008 at 5:08 am

Useful article as always, I’m starting on a redesign for the website I run and need some magazine-y/grid inspiration!

web design, almog , media
Feb 25, 2008 at 5:46 am

as always very good and useful Thanks

Jan
Feb 25, 2008 at 4:10 pm

thanks for showing me that not all grid based designs are in minimalistic/boring black-white colors and shapes

Lever
Feb 26, 2008 at 5:59 am

I was just about to embark upon researching this subject for an upcoming redesign and you’ve saved me a job. Thank you, you’re an inspiration and a great help :)

Jeff Harvey
Feb 26, 2008 at 10:15 am

Great article…good examples of many different uses for these types of layouts. However, I was hoping you would mention and provide examples of GRAPHICS-INTENSE sites that utilize columns/grids as placeholders for organizing images (and corresponding content with added behavior). For example, sanslimbo.com uses a 4 column with header and footer grid to hold different images, each column styled with CSS , each with javascript controlling behavior of content.

Jason Milburn
Feb 27, 2008 at 9:57 pm

Great post as usal. Love this site.

Kenneth
Feb 29, 2008 at 11:49 am

Great and inspirational post! Thanks.

selcuk
Feb 29, 2008 at 3:18 pm

thanks very useful, i am bored about tables, grids etc.

Ackley Media
Mar 4, 2008 at 2:29 pm

Awesome List!
Thank you very much for these. You got my bookmark!
Awesome header on your site… I love it.

spoon
Mar 7, 2008 at 3:49 am

nice list! this is what i’ve been looking for…
good job!!!

Ralph
Mar 7, 2008 at 11:04 am

Thank you for this great list about “Grid and Column Designs”.

I like this style extremly and some great websites to have in a list completly… thanks a lot.

Ralph

Dom
Mar 10, 2008 at 8:34 am

Excellent article. See http://www.swissinfo.ch/eng we use equal columns to manage the grey vertical lines.

shant08
Mar 11, 2008 at 5:53 am

This website is really nice and helpfull

Thanks

Divyaostwal
Mar 12, 2008 at 7:14 am

helps in editorial design too!!

Elias
Mar 15, 2008 at 9:43 am

Nice, but i like my design too! :D

Arno Kind
Mar 17, 2008 at 5:24 pm

I like especially the “Subtraction” theme. Very good list thx alot.

Antonella
Mar 19, 2008 at 2:12 am

Great list. I wish some day my design skills will reach level of some of the shown sites.

chad
Mar 19, 2008 at 2:25 am

I’m impressed by the way you gathered your info. The designs are great and it stirs up my creativity. Your article is very inspiring. Good work and thanks! :)

Austin
Mar 22, 2008 at 3:32 pm

That helps a lot, I think I might use some of of these for idea’s!

alexian
Mar 26, 2008 at 3:31 am

yes,I like best,thanks,My e-mail:alexian_chen@gmail.com,make friends.

Twist Systems
Mar 27, 2008 at 6:10 am

Great selection of layouts, a great design resource, with some of my favorite sites included…Good blog!

nexenator
Apr 1, 2008 at 6:25 am

Don’t want to advertise here but I think the iStylr (http://iStylr.com) is worth a mention, too. It allows the creation of multicolumn/grid layouts online in a wisiwig like css generator.

ilan
Apr 2, 2008 at 10:33 am

Cool. Great post. thank you

KG Lew
Apr 9, 2008 at 4:02 am

This is a great post.. there is so much good inspiration here to have me designing for a while :)

Eric
Apr 14, 2008 at 7:49 pm

really like the NY Times….I think they bring the traditional newspaper style to the web really well.

Jac
Apr 21, 2008 at 4:42 am

Check out http://www.nme.com; It’s one of my favourites :)

snarkycat
Apr 24, 2008 at 8:42 am

I’m not seeing a lot of ecommerce sites here that really stick to grid layouts. Does anyone have suggestions? I’m doing research.

Thanks

Felipe
Apr 24, 2008 at 6:54 pm

Globo.com is the very good example

hary
May 1, 2008 at 4:12 am

this page make me happ. thanks

carlo
May 3, 2008 at 6:05 am

great page. Thank you

Web Design Denver
May 5, 2008 at 2:13 pm

Very cool post. Grid design is a must when it comes to heavy content websites.

larsen
May 18, 2008 at 3:45 am

I really like the Substraction theme. Nice collection, thanks

Harry Roberts
May 24, 2008 at 3:43 am

Here’s a CSS grid framework I made: http://csswizardry.com/typogridphy/

John
Jun 1, 2008 at 11:04 pm

Great stuff!!!

Julio
Jun 7, 2008 at 4:39 pm

What do you guys think of http://www.timothysykes.com/

Colin Miller - Freelance web designer
Jun 14, 2008 at 2:58 am

Ungarbage is my fave from this list, some really nice work here. I love this site!

Jim Plaste
Jun 15, 2008 at 1:00 pm

Interesting and INSPIRING!

Kayseri Dostlar Emlak
Jun 28, 2008 at 11:01 am

good

Webflo Studios
Jul 2, 2008 at 4:45 pm

We are always looking for new ways to tackle column and grid design, thank you for sharing with us some of your findings.

Joey
Jul 3, 2008 at 11:21 am

Very inspiring, I love this site! :)

Joe – http://www.leetwebmasters.com

vee
Jul 4, 2008 at 3:45 pm

Wow, some of these sites are really beautiful. I really like Kineda & Ungarbage.

James Wragg
Jul 10, 2008 at 3:16 pm

Stuff & Nonsense has the sIFR headings missing. Looks a bit wierd. Nice article btw

Min Thu
Jul 13, 2008 at 12:33 am

This is another such a great collection of inspiring designs.

Stephanie
Jul 19, 2008 at 1:02 am

This is great, exactly what I was looking for! The perfect amount of inspiration for putting a magazine online.

Fatih
Jul 19, 2008 at 3:46 pm

Wow,great.I really liked Alex’s page.Soft,clean and useful.
Thanks for the collection.

RODRIGO
Jul 24, 2008 at 7:57 am

COOL MAN!

Eazzy | Website Templates
Aug 11, 2008 at 9:47 am

thanx for this good collection

aliveli
Aug 17, 2008 at 5:08 am

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!

dekor
Oct 14, 2008 at 6:20 pm

thanks for this good collection

gevv
Oct 15, 2008 at 8:33 am

Thanks best collection

Rachel
Oct 16, 2008 at 1:39 pm

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!

Exdizajn
Oct 23, 2008 at 6:48 am

a lot of good stuff, nice!

Nayna
Oct 26, 2008 at 9:23 am

Best way to explain to a learner. It spelts out the minischule of details that has to be kept in consideration while designing Grids.

Hylic
Nov 13, 2008 at 4:18 am

Lots of awesome stuff here…loved it, and obviously some inpiration found here as well.

thank you!

bebo music skins
Dec 5, 2008 at 5:07 pm

nice, i bet coding all of that would be a night mare but worth it in the end though.

Carlos Hermoso
Dec 6, 2008 at 11:17 am

Good work. Thanks for sharing

Steve | Web designer
Dec 16, 2008 at 1:55 pm

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…

Stephen Fairbanks
Jan 19, 2009 at 8:10 am

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.

linda
Jan 20, 2009 at 4:28 pm

Wow, too much selection, really great layouts

sanat
Jan 22, 2009 at 11:25 am

thanks

Colin
Jan 26, 2009 at 4:26 pm

This has made me think about re designing our site!

visit
Jan 30, 2009 at 2:42 am

This site is interesting as well as informative. Enjoyed browsing through the site. Keep up the good work. Greetings..

Spotless
Feb 7, 2009 at 12:51 pm

Great designs. Such inspiration.

outthislife
Feb 9, 2009 at 3:57 pm

most of those are pretty bad imo. also wtf is w/ the letter spacing in fields?

Website Designer Steve
May 10, 2009 at 8:03 am

Probably the most inspiring array of website designs all in one article. Website designers can learn a lot from this article.

Ash
Jun 10, 2009 at 5:12 am

Some very good work here . Definitely Impressed .

Web Design Bangladesh
Jul 10, 2009 at 5:10 am

Great, Great, Great collection of Grid and Column designs. Definitely i shall follow your resources.

good
Aug 2, 2009 at 11:59 pm

Nisha
(www.sblinfo.com)

Nisha
Aug 3, 2009 at 12:00 am

Good sites

Fashoo
Sep 4, 2009 at 9:16 pm

This has made me think about re designing our site!

bagsin
Sep 10, 2009 at 7:43 pm

Can you tell me how to control grid

Dieter
Oct 16, 2009 at 7:51 pm

Thx for the showcases of grid systems, it really helps me in future.

rx-1
Oct 17, 2009 at 4:54 pm

Definitely i shall follow your resources.

Mike
Oct 31, 2009 at 4:48 am

Great, Great, Great collection of Grid and Column designs. Definitely i shall follow your resources.

vincentdresses
Jan 5, 2010 at 11:33 pm

The designs showed here show what simple and tasteful design is all about. Another one to consider

Aditya Dipankar
Jan 7, 2010 at 1:10 pm

Utterly useful stuff. Specially for those beginning to getting introduced to grids in web/graphic design.

Stefan
Feb 26, 2010 at 4:54 am

Very nice collection. This is very inspiring for new projects.

Melanie
Mar 25, 2010 at 9:07 am

Very nice collection of Grid and Column designs. We are planning a new blog, maybe we use such a style, too.

Web Design
Apr 28, 2010 at 8:42 pm

very c ool thanks for sharinG!

Minilik Tefsfaye
May 17, 2010 at 11:44 am

Really, You are great. You showed me I am far behind you.
I will follow your resources.

Webdesign Berlin
Jun 15, 2010 at 12:32 am

Hey great compilation and very inspirative. Thanks a lot, that will be bookmarked right now :)

Basit Khan
Jul 1, 2010 at 3:53 am

very nice I will follow your resource

Energy Manager
Jul 16, 2010 at 4:14 pm

We have recently redesigned our website using 960. It’s a wonderful framework.

jonathan Smith
Aug 18, 2010 at 8:47 am

Great resource…don’t forget the SEO part!

Data Centre Cleaning
Aug 23, 2010 at 6:08 am

Simple clean layouts work for me…the clearer the better. Grids are perfect for this

Webdesign Berlin
Sep 7, 2010 at 7:12 am

I will bookmark this site. Really interesting stuff. Thanks a lot

LVM
Sep 10, 2010 at 3:03 am

Make a good impression – thanks for the work …

Webdesign Berlin
Sep 12, 2010 at 12:06 pm

Thanks for this nice collection. My favorite is Sundance Film Festival. Its very nice designed.

Thanks a lot

limo in dc
Oct 9, 2010 at 10:27 am

superb grid and colum design.

Webdesign Berlin
Oct 11, 2010 at 5:27 pm

thank you from berlin!

Notebook Reparatur
Oct 25, 2010 at 5:16 pm

Very very great resource. Thank you fo r this great work Admin

Gebrauchte Waschmaschine Berlin
Oct 25, 2010 at 5:18 pm

Thid is a very interesting site.i will bookmark it. Thanks

洗地机
Nov 25, 2010 at 10:12 pm

I think this superb grid and colum design.

Just WEBdesign Berlin
Dec 17, 2010 at 6:58 am

Great work! Thank you.

Henry Peise
Dec 23, 2010 at 11:39 pm

white iphone 4 available now. It is the best news today.

Juno Mindoes
Dec 24, 2010 at 10:28 pm

Recently i am looking fot the white iphone 4 conversion kit. If you have any recommendation, plz tell me. I will be very grateful!

MAN RENGAT
Dec 29, 2010 at 9:41 pm

Thank’s for this design…

visit me back man…

Melvins
Jan 3, 2011 at 2:11 am

Very useful tips for grid and column designs for a webpage. This is something what people want to learn and apply it in their web design and a great help to those who are new to web design field.

Los Angeles Web Design

Ben
Jan 13, 2011 at 4:31 am

Oh, that’s what im looking for!

grgrege
Jan 14, 2011 at 10:37 am

Pokkadots.com is website dedicated to finding best and most affordable products you need for your baby – baby clothes, designer diaper bags, baby related bedding and furniture.

tütüne son
Jan 27, 2011 at 3:25 pm

Recently i am looking fot the white iphone 4 conversion kit. If you have any recommendation, plz tell me. I will be very grateful!

altın çilek
Feb 2, 2011 at 5:45 am

watercolor efect purfect

hcg damla
Feb 2, 2011 at 1:41 pm

Thank’s for this design…

visit me back man

Web Design DC
Feb 19, 2011 at 12:48 am

I love new york times all time favorite…

Singapore Office
Mar 17, 2011 at 2:24 am

Splendid work. Thank you so much for this post. Interesting content.

Office in Singapore
Mar 17, 2011 at 2:25 am

This is not a nice article. It’s a great article!!! This will really be highly beneficial . Thank you for creating this!

Mark Hamilton
Mar 21, 2011 at 5:45 am

Colour effects are perfect and love the combination here..please keep sharing more from you man. I will show this to our expert team of Web Designer in London & yes thanks for that hard work.

s23
Apr 6, 2011 at 4:14 pm

Thank’s

dexx
Apr 17, 2011 at 2:09 pm

Another questionnaire, the participants’ problem identification and structuring, idea generation, problem elaboration and clarification, such as creativity, problem solving insertion sezkin idea which one’s preferred styles are evaluated. While participants preferred the style of non-disclosure and intellectual development of ADHD, with ADHD, participants chose to produce ideas.

Tampa Web Design
Apr 29, 2011 at 1:06 am

This is something what people want to learn and apply it in their web design and a great help to those who are new to web design field.i appreciate your beautiful article from my deep heart!

Fantazi ayakkabı
May 3, 2011 at 7:25 am

Thanks for posts

panax clavis
May 16, 2011 at 5:50 am

süperrrrrr

business appraisals
May 24, 2011 at 3:40 am

This is something what people want to learn and apply it in their web design…

web design uae
Jun 3, 2011 at 5:44 am

Grid and Column Designs – Love it.Thanks for the share.

Dortcelik Cocuk Hastanesi Randevu Alma
Jun 19, 2011 at 3:57 pm

Thanks for sharing and keep up the good work. That is a great article.

Gemlik Devlet Hastanesi Randevu Alma
Jun 19, 2011 at 4:14 pm

I am not sure whether it is possible or not but It would be interesting to present source codes for effects on facebook pages.

طراحی وب سایت
Jul 31, 2011 at 5:31 am

Thanks for posts

shop online
Aug 20, 2011 at 2:56 am

An annoying trend, as of late, is the digression of intellectual debate turning into playground level insults. There are people out there who have not grasped the concept.

Jonathan
Aug 23, 2011 at 11:51 am

Interesting designs…we’ve just redesigned our website and it would have definitely helped being able to see the types and make a selection from those.

eczane
Sep 8, 2011 at 8:48 am

Thanks for posts

pembe maske
Sep 14, 2011 at 5:20 am

Thanks for posts

Moliva
Dec 9, 2011 at 9:25 am

Interesting designs…we’ve just redesigned our website and it would have definitely helped

Computer Room Cleaning
Jan 16, 2012 at 4:37 am

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?

James
Aug 16, 2012 at 11:42 am

These designs are great, I like how they are professional yet clear and accessible.

George
Jan 19, 2012 at 1:18 am

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.

yemek tarifleri
May 2, 2012 at 12:26 pm

Excellent Tutorials! Thanks so much!

Computer Cleaning
Aug 16, 2012 at 11:44 am

Fantastic designs, professional yet fun.

Alquiler yates Ibiza
Aug 16, 2012 at 1:45 pm

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.

DymoLabels
Jun 1, 2013 at 9:15 am

hey
i really like your collection
thanks for sharing

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.