21 Grid Based Websites

Grid based websites have become very popular over the past year. With a lot of heavier websites users are thrown off or confused because the information is showcased to them in an unorganized way. You can give dominance over other elements without making the website too crowded or overbearing. I love looking at grid based sites – because they are so easy to read and view.

With a lot of new framework’s being introduced (I use 960 Grid). Most designers and studios are using these grid’s to help structure their websites, WooThemes using the 960 Grid for their framework. The 960 Grid isn’t the only way of making websites look clean and structured. These sites showcase grid systems, with some extra resources at the bottom.

Grid Based Designs

Grid Based Designs

Grid Based Designs

Grid Based Designs

Grid Based Designs

Grid Based Designs

Grid Based Designs

Grid Based Designs

Grid Based Designs

Grid Based Designs

Grid Based Designs

Grid Based Designs

Grid Based Designs

Grid Based Designs

Grid Based Designs

Grid Based Designs

Grid Based Designs

Grid Based Designs

Grid Based Designs

Grid Based Designs

Grid Based Designs

Extra Resources

The Grid System

A List Apart – Outside the Grid

Grid Based Design Resources

3984367161_ce562ac5cf_o.png
  • Cool list! We (Yummygum.nl) also use grids because it works really nice. However, I think one should be aware of the pitfalls of working with grids: getting too caught up in the grid. It shouldn’t hold you back from being creative with your design. In portfolio website it’s really nice to have a good grid to align your portfolio items nicely, but for homepages one shouldn’t let a grid decide what the page is going to look like (in my opinion).

  • Leon my thoughts exactly. These sites look great but it’s almost back to designing by numbers. Where’s the creativity? Where’s someone daring to be different instead of conforming to a preset set of rules? Throw vertical rhythm into the mix and designers might as well go home.

  • nice list

  • There are some really lovely examples, this grid based layout definitely benefits a site with portfolio or image based content which requires organization, enabling the site to be visually clear to the voyeur.

  • Chuck

    Grids suck. Lighthouses rule.

  • Nice List! Some of them are really inspiring.

  • 21 Grid Based Websites – http://bit.ly/7pLtf

  • RT @justcreative: 21 grid based websites for inspiration – http://bit.ly/1mW5O8

  • very great collection, thanks for share

  • RT @chadMueller: 21 Grid Based Websites http://bit.ly/V8q2I

  • que haces que tengo verdad….. jajaja xD y algo interesante y motivador.. http://bit.ly/7pLtf

  • 21 Grid Based Websites http://bit.ly/3CWPr6
    #design #grid #websites

  • RT @tweetmeme Grid Based Websites http://retwt.me/17oHp

  • http://bit.ly/1mW5O8 21 layouts de site baseados em proporção de grades.

  • 21 Nice Grid Based Websites : http://bit.ly/7pLtf

  • first time i’ve heard of grid web design, very interesting

  • http://tinyurl.com/ylk48sq
    Grid Based Websites

  • Grid Based Websites: Grid based websites have become very popular over the past year. With a lot of heavier web.. http://bit.ly/4tjYGI

  • I love grids. I hate ’em too. While I like the sense of order and neat organization they offer, I don’t feel very comfortable about being boxed in.

    And it’s so easy to overdo things at times. Please, use your sense of restraint guys. Give my eyes some rest.

  • very interesting! i like this much..

  • Great icons.. better to make my new forum dress up like a bride

  • Great collection of 404 pages, both the Homer Simpson ones are my personal favorite.

  • Pure CSS text gradient (no PNGs), it sort of took me by surprise for a second but finally

  • I don’t think that this type can challenge the same new product from another company.

  • Great point of view. I must msg about it my to brother! Best Regards Grafik komputerowy.

  • ADD MY SITE 😛

  • Love the Area 17 website. I like their use of fonts…