Line25

20 Web Designs Built With Modular Grid Layouts

Read the full post

Grids are normally seen as blocky layouts with strict rows and columns, but grids don’t always have to be so structured. Modular grids provide a balanced layout by dividing up your content into equal measures, but the ability to span multiple columns ensures the content appears interesting and dynamic. Modular grids are becoming increasingly popular in web design, often combined with images and bright colors to create a patchwork quilt style layout that neatly presents a large amount of content in a small space. In today’s showcase, I provide 20 great examples of websites that are built with modular grids, these layouts bring harmony and order to a chaotic amount of content!

Column Five

Creative Content Marketing

Column five’s website divides its website’s content into rows and columns and also presents it in a creative way. Check it out!

Hatch

Hatch San Francisco

This example doesn’t use equal rows and columns. It has a full-screen modular grid layout with different sizes of thumbnail images and typography. It is yet another good example which is definitely worth using as a source of inspiration.

Bodhi

www.bodhicycling.com

Bodhi is yet another good example of a website that uses a modular grid layout. They did not divide content into equal rows and columns, and by doing that, they managed to make the website look more dinamic.

MCQ

McQuade

MCQ uses a minimalist design and a modular grid design layout. The result is elegant and it can be a great source of inspiration for future projects.

Script & Seal

Script & Seal

A light pink background and bright thumbnail images presented in a grid layout always work well together and this example proves it! Have a look and find your inspiration!

Lees Ferry

Lees Ferry

If you liked the previous examples then will definitely like this one as well. This is a great example of a website that uses a modular grid. Check it out!

Csaba Gabor-B

Csaba Gabor

If you were looking for a website that uses a full-screen modular grid, this example might be exactly what you had in mind.

 

Native Shoes

Shoes, Boots & Sandals

Check out how you can use modular grids on an e-commerce website on Native Shoes’ website and find your inspiration!

Design Your Life

Design Your Life

This is a great and creative way to use modular grids. It is definitely an example of a unique design which can be a great source of inspiration for future projects. It is worth having a closer look at this example and at the thought and effort which was put into all the details.

Résidence Mixte

Résidence Mixte

If you are thinking of a cool way to mix colors, typography, and pictures in a modular grid design layout, then you might want to have a look at this example to see if this is what you had in mind. This website mixes different ways of presenting content and manages to create a really eye-catching website.

Leodis Lager

Journal

This example uses minimalism and a modular grid layout to present content to its website’s visitors. It is definitely worth having a closer look at this website as it can be a great source of inspiration for future projects.

V76 by Vaughn

V76 by Vaughn

This is definitely a creative way of using modular grids. This is yet another cool example that doesn’t place its content in equal rows and columns, but manages to present their products in a unique way.

Quincy Réquin & Associés

Quincy Réquin & Associés

This example is definitely worth following as it can be a great source of inspiration. It has an elegant design based on a modular grid layout. Check it out!

Everlovin’ Press

Everlovin' Press

How about another good example of using modular grids in your designs? Check out Everlovin’s website and find your inspiration.

Mercer Tavern

Mercer Tavern

This website is focusing on presenting a tavern and its products through an eye-catching modular grid website layout. Have a look!

Matchstic

Matchstic

If you were looking for yet another good example of a website that places content in equal rows and columns this might be exactly the website you had in mind!

KATVIG

KATVIG

KATVIG uses flat colors, images, and a modular grid layout to present content to its website’s visitors. This is yet another good example that can be a great source of inspiration for future projects.

White Frontier Brewery

Handcrafted beer

This is yet another good example of a website that uses modular grids in a creative way. It also has a vertical menu bar that blends in perfectly with the proposed design. Have a look and find your inspiration.

Peachey Photography

Peachey Photography

This website is yet another good example of using modular grids to make an elegant design. This one is perfect for a photography portfolio and might be a great source of inspiration for future projects. It is definitely an example worth following!

Sebastian Sejer & Co

Sebastian Sejer & Co

Last but not least, this is Sebastian Sejer & Co’s website. This website also mixes minimalist with a modular grid layout to create a good-looking web design layout.

  • 187
100 HD Blurred Backgrounds

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of 100 HD Blurred Backgrounds + bonus 10 realistic web shadows.

100 HD Blurred Backgrounds

Written by Iggy

Iggy is a designer who loves experimenting with new web design techniques collating creative website designs. You can follow Iggy on Twitter.

14 Comments

  1. Kereana says:

    This can be a great source of information. Such an helpful blog regarding grids and layouts. Thank you for sharing. Keep up the update.

  2. انجام پایان نامه says:

    Cool layouts amazing work done your layout design help me create my company website layout thanks

  3. Denise Gore says:

    Cool layouts amazing work done your layout design help me create my company website layout thanks

  4. ترجمه says:

    it was great congrts

  5. ترجمه says:

    wow awesome

  6. Addy says:

    Chris thanks for sharing inspiring collection of grid layouts. All are awesome but I like White Frontier Brewery the more. Simple, Elegant and clean indeed.

  7. Amy says:

    Hi Chris Spooner,

    Nice collection, Thanks for sharing layouts. Actually I was confused which type of layout I should use for my website. But your blog help me to choose a great layout.
    Thanks for share it. I will keep updating.

  8. Mintco Financial says:

    Hi Chris, Yet another very useful post, thanks for sharing.

  9. akku p150hmbat says:

    Very like these theme,please keep on the good work!

  10. Kristina Hughes says:

    Love this inspiring collection of grid layouts.. The grid concept is almost use in fashion and photography websites..

  11. Guy Kawasaki says:

    This a cool little read. Thanks for the post. This reminded me of a post talking about Why Your Company’s Website Needed to be Redesigned Yesterday

    Thanks for the read again.

  12. Wordpress Theme says:

    Thanks for the share

  13. Material Design Templates says:

    Native Shoes Like this

  14. Charlie says:

    Nice collection Chris!
    Native shoes looks nice but I found it difficult to use – didn’t know I could drag until my mouse went on the top 1/3 of the box :|

Leave a response