Feb 20

Tagged in: Comments:Add

Grid and Column Designs

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

Delicious Stumbleupon Digg

Review: XHTML Challenge jQuery Tutorials for Designers

Comments

Pages: 7 6 5 4 3 2 1 » Show All

There are 70 comments (+Add)

  • 70 Web Design Denver http://www.shycon.com

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

  • 69 carlo http://www.tarozzi.net

    great page. Thank you

  • 68 hary http://-------------

    this page make me happ. thanks

  • 67 Felipe

    Globo.com is the very good example

  • 66 snarkycat http://www.sharonrosenfeld.com

    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

  • 65 Jac

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

  • 64 Eric http://www.ebenoit.com

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

  • 63 KG Lew http://www.oneyearmillionaire.net

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

  • 62 ilan http://www.ucretsizilan.net

    Cool. Great post. thank you

  • 61 nexenator http://istylr.com

    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.

Pages: 7 6 5 4 3 2 1 » Show All

Post Your Comments

(required)

(required)

Comment Guidelines

  • Please keep comments related to topic. And be nice, don't spam!
  • Basic HTML tags are allowed:
    <a href> <abbr> <acronym> <blockquote> <code> <em> <strike> <strong>
  • Note: un-related or spam comments will be deleted.

Live Comment Preview

ad Flash CS3 Components from Flashloaded
Speed up your Flash development with easy to use Flash Components: Menus, Slideshows, FLV Player & more!
Flashmint Download Flash Templates
Next generation of Flash Templates. XML, CMS, Video.

Back to top