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

  • http://www.yummygum.nl leon

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

  • http://www.acquiweb.com/blog Darren Taylor

    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.

  • http://deconstructioncode.blogspot.com/ choen

    nice list

  • http://www.crearedesign.co.uk Victoria Web

    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.

  • http://www.vivebarbanza.com Yago Aviles

    Nice List! Some of them are really inspiring.

  • http://twitter.com/alfieindesigns/status/5190424710 Alfie Nollora

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

  • http://twitter.com/luvx3/status/5194542904 sarah ・サラ

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

  • http://coislamscience.com Usman Arshad

    very great collection, thanks for share

  • http://twitter.com/bitconstructor/status/5235159775 BitConstructor

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

  • http://twitter.com/kitzero/status/5247347594 kitze

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

  • http://twitter.com/lukelux/status/5283985329 Luke Lux

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

  • http://twitter.com/coloratus/status/5389686905 Jeon ht.

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

  • http://twitter.com/estacaosd/status/5392025744 Estação S.D.

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

  • http://twitter.com/_jphilipg/status/5407267378 JphilipG

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

  • http://www.kunej.com/ vinska klet

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

  • http://twitter.com/catch_down/status/5784211497 catch_down

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

  • http://twitter.com/webdesignfreak/status/5856945745 WebDesignFreak

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

  • http://www.psprint.com/ Ashely Adams : Online Printing

    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.

  • http://yahoo.com melody mae

    very interesting! i like this much..

  • http://www.didactico-delpanda.com.ar Joyeria en plata

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

  • http://www.didactico-delpanda.com.ar Juegos didacticos

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

  • http://www.lapietradaterra.com.ar Joyeria en plata

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

  • http://www.didactico-delpanda.com.ar Juegos Didacticos

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

  • http://rmnproject.pl Grafik komputerowy

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

  • http://s-2000.eu Luigi

    ADD MY SITE 😛

  • http://www.thecreativeham.com Alex

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