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
watercolor efect purfect
Thank’s for this design…
visit me back man
I love new york times all time favorite…
Splendid work. Thank you so much for this post. Interesting content.
This is not a nice article. It’s a great article!!! This will really be highly beneficial . Thank you for creating this!
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.
Thank’s
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.
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!
Thanks for posts
süperrrrrr
This is something what people want to learn and apply it in their web design…
Grid and Column Designs – Love it.Thanks for the share.
Thanks for sharing and keep up the good work. That is a great article.
I am not sure whether it is possible or not but It would be interesting to present source codes for effects on facebook pages.
Thanks for posts
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.
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.
Thanks for posts
Thanks for posts