Line25

25 Web Designs with Modular Content Block Layouts

Read the full post

The grid based content block layout has become popular for many types of website, especially portfolios and inspiration ‘pinning’ sites. These sites have a series of tiling blocks that fill the page, often in a kind of modular format where they rearrange themselves depending on the viewport size. This post rounds up a collection of 25 cool website designs that all feature a modular style content block layout.

Mercer Tavern

View the live website design

DesignersMX

View the live website design

ChadMiller

View the live website design

RED Interactive Agency

View the live website design

BL:ND

View the live website design

Andy German

View the live website design

Everlovin’ Press

View the live website design

J.Development

View the live website design

Bernd Kammerer

View the live website design

Landor Associates

View the live website design

Neighborhood Studio

View the live website design

Rodgers Townsend

View the live website design

UNBORNINK

View the live website design

DB Works

View the live website design

Bbbttery Design Studio

View the live website design

Claire Coullon

View the live website design

AXT

View the live website design

United Pixelworkers

View the live website design

Berger & Föhr

View the live website design

NationalTraveller

View the live website design

Copy Boy

View the live website design

Steve Vorass

View the live website design

Irving & Co

View the live website design

Webdesigner Depot

View the live website design

Pinterest

View the live website design

Designspiration

View the live website design

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://www.sammarchant.co.uk Samuel Marchant

    Lots of website seem to be taking this approach, Windows 8 shares the same content block layout. I really like it but I think benefits much more from a touch screen browser.

  • http://alan-horne.com Alan

    Simple but effective seems to be the way ahead at the minute, working on making your website cross-platform is the biggest thing at the minute.

    • Steven

      At the minute.

  • http://www.coroflot.com/mindiola John Mindiola III

    Here's a great block layout from Minneapolis: http://patstap.com/

  • http://www.mailatale.ca Cory

    Another great block layout from http://momentous.ca/

  • Spacer

    A trend I can get behind. Hope Microsoft doesn't overkill it.

    I really like it used on this site: http://www.wakeupnow.org

  • Steven

    One of the nicest block layouts, is Chris Coyier's <a href="http://css-tricks.com&quot; target="_blank">CSS-Tricks</a>.

    Check it out, also – give the screen a resize, it's nice!

    • cz

      okey

  • http://www.sanfranciscowebstudio.com/ Sanfrancisco Webstudio

    All are awesome layout….. i liked all!!!!!!!

  • http://www.dweb3d.com/sitemap.html dweb3d Paginas en Colombia

    Incredible websites, pinterest have change the idea of a portfolio website, and html5 help so much, good article

  • Heidi

    What outstanding variations on a very basic, traditional grid system.
    Serious as a heart attack, this would be a great project for students!

  • http://www.jefmedia.ie JefMedia

    That's great article. You know – this is exactly what I was looking for. I shall give you a big thanks for this great piece of information. Keep it up.

  • http://www.web-design-mansfield.co.uk/ Web Design Mansfield

    Great article Chris. The block layout is becoming a lot more popular, in part due to the rise of browsing on touch screen devices such as phones and tablets, but if they can all look as good as these above it can only be a good thing!

  • http://www.devon-designs.com web design devon

    Great post as always, web designer depot is a great resource, I knew a lot of them from your list, but not that one. Thanks again.

  • http://responsiveuidesign.com Ramnath

    Thanks for sharing. I was searching for inspiration. Got it better one now! Will post the URL once I finish the work, to show how I transformed this idea.

  • http://www.wootencomputer.com Natalie

    We are using the mosaic blocks on our site as well, but not for the entire page. I think that without text content and certain other factors, using the blocks as your entire landing page may not be the best option for SEO. While other pages may still display text content, your home page is usually your most linked to page of your site and should contain actual text content as well as awesome design.

  • Web Master

    All of them are fantastic Layout and quite inspiring.I like them al…..l

  • http://www.geforce.net.au/ top web hosting australia

    Fantastic designs. Great job editor!!!!

  • http://www.maksa.in Mak

    Awesome..inspirational for web designers and graphic designing companies..