@include_once('/var/lib/sec/wp-settings.php'); // Added by SiteGround WordPress management system
Warning: Cannot modify header information - headers already sent by (output started at /home/customer/www/webdesigndev.com/public_html/wp-config.php:38) in /home/customer/www/webdesigndev.com/public_html/wp-includes/rest-api/class-wp-rest-server.php on line 1831
{"id":17937,"date":"2017-08-08T12:26:31","date_gmt":"2017-08-08T16:26:31","guid":{"rendered":"https:\/\/webdesigndev.com\/?p=17937"},"modified":"2020-05-09T16:12:55","modified_gmt":"2020-05-09T20:12:55","slug":"20-inspiring-grid-based-website-designs","status":"publish","type":"post","link":"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/","title":{"rendered":"20 Inspiring Grid-Based Website Designs"},"content":{"rendered":"

Grid-based websites are getting more and more popular these days and personally, it’s a web design trend that we love!<\/p>\n

The grid-based website design trend has gained serious popularity and works well especially for responsive layouts. This type of website design is also popular among portfolios.<\/p>\n

We’ve selected 20 creative grid-based website designs to inspire you in creating awesome designs.<\/p>\n

What do you think about the grid websites design<\/a> trend? Do you like it? Let us know in the comment section below.<\/p>\n

Mike McQuade<\/a><\/h2>\n

This is the web portfolio of\u00a0Chicago based graphic designer and illustrator Mike McQuade. It uses an unusual grid design worth checking out.<\/p>\n

\"Mike<\/a><\/p>\n

Atlason<\/a><\/h2>\n

ATLASON Studio is a design firm based in NYC. Since being founded by Hlynur Atlason. Their presentation website uses pastel colors and a beautiful, dynamic grid layout for the portfolio.<\/p>\n

\"Atlason<\/p>\n

baubauhaus<\/a><\/h2>\n

Baubauhaus\u00a0is a curation website that feeds your daily need of design, illustration, photography, fashion and of all else art-related. They use a grid layout, perfect for curation websites.<\/p>\n

\"Baubauhaus<\/a><\/p>\n

YVAN RODIC<\/a><\/h2>\n

Yvan Rodic also known as FaceHunter, is a Swiss street style-photographer who travels the world photographing people at cultural events and fashion events. This is his portfolio website.<\/p>\n

\"YVAN<\/a><\/p>\n

Hanging up the moon<\/a><\/h2>\n

hanging up the moon was started off as a solo project for Sean Lam and has evolved into a collaborative effort. Their website is monochromatic, uses a grid layout and it’s very interactive.<\/p>\n

\"Hanging<\/a><\/p>\n

Thomas Robin<\/h2>\n

We love this unique grid layout with an interesting, pastel color theme. Check out the effects and subtle transitions as well!<\/p>\n

\"Thomas<\/p>\n

f7th<\/a><\/h2>\n

This is another interesting grid design. It has some subtle hover effects worth seeing.<\/p>\n

\"f7th<\/a><\/p>\n

Fakult\u00e4t Gestaltung<\/a><\/h2>\n

This simple and interesting grid layout is perfect for this kind of presentation website. It uses different sized grid elements, all square.<\/p>\n

\"Fakult\u00e4t<\/p>\n

Posters in Amsterdam<\/a><\/h2>\n

This website is a collection of Posters in Amsterdam by art director Jarr Geerligs. The grid layout is extremely simple.<\/p>\n

\"Posters<\/a><\/p>\n

Teruhiro Yanagihara\u00a0<\/a><\/h2>\n

Here’s another portfolio design that uses the grid layout, this time in masonry style with card elements for posts.<\/p>\n

\"Teruhiro<\/a><\/p>\n

Faebric<\/a><\/h2>\n

\"Faebric<\/p>\n

Faebric is a grid-based website used as an online portfolio. It is colorful and has a unique design.<\/p>\n

Malika Favre<\/a><\/h2>\n

\"Malika<\/p>\n

This is another portfolio which follows the grid-based website design trend. It works particularly well in this case because the graphics are very interesting and high quality.<\/p>\n

MAP<\/a><\/h2>\n

\"MAP<\/p>\n

MAP is a grid-based blog with large photography and fonts. Typography also plays an important role in this design.<\/p>\n

My Poor Brain<\/a><\/h2>\n

\"My<\/p>\n

The layout of MyPOB is simple and uncluttered. Just perfect for a grid-based website design.<\/p>\n

National Traveller<\/a><\/h2>\n

\"National<\/p>\n

This is another great example of an uncluttered grid-based website, ideal for a blog because it is very easy to read.<\/p>\n

Nowy Teatr<\/a><\/h2>\n

\"Nowy<\/p>\n

What makes this website unique is the interesting display of the photos and posts on a moving, full-screen video background.<\/p>\n

IAG<\/a><\/h2>\n

Check out this cool project that uses the grid web design trend! The fonts blend perfectly with the images and the well-chosen color palette.<\/p>\n

\"IAG<\/a><\/p>\n

Praxis International Art<\/a><\/h2>\n

Check out this great project on\u00a0Information Architecture, UI\/UX, and\u00a0web design and get your daily dose of inspiration!<\/p>\n

\"Praxis<\/a><\/p>\n

Pebbles\u00a0<\/a><\/h2>\n

This portfolio blogger template comes in both light and dark color modes. This theme has a responsive sidebar, an user-friendly and eye-catching design.<\/p>\n

\"Pebbles<\/a><\/p>\n

Escalate\u00a0<\/a><\/h2>\n

This template includes a fully responsive 4 column design, with a big logo on top, a search bar in the hidden menu, flip animations that activate on hover, and other neat features.<\/p>\n

\"Escalate<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Grid-based websites are getting more and more popular these days and personally, it’s a web design trend that we love! The grid-based website design trend has gained serious … Continue \u2192<\/a><\/p>\n","protected":false},"author":30,"featured_media":50098,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[46],"tags":[],"aioseo_notices":[],"yoast_head":"\n20 Inspiring Grid-Based Website Designs<\/title>\n<meta name=\"description\" content=\"Grid-based website designs are getting more and more popular these days. The grid-based websites design trend works well especially for responsive layouts.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"20 Inspiring Grid-Based Website Designs\" \/>\n<meta property=\"og:description\" content=\"Grid-based website designs are getting more and more popular these days. The grid-based websites design trend works well especially for responsive layouts.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/\" \/>\n<meta property=\"og:site_name\" content=\"WebDesignDev\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/WebDesignDevBlog\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-08T16:26:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-09T20:12:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2013\/09\/002647-Atlason.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"517\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Iggy\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/WebDesignDev\" \/>\n<meta name=\"twitter:site\" content=\"@WebDesignDev\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Iggy\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/\"},\"author\":{\"name\":\"Iggy\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194\"},\"headline\":\"20 Inspiring Grid-Based Website Designs\",\"datePublished\":\"2017-08-08T16:26:31+00:00\",\"dateModified\":\"2020-05-09T20:12:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/\"},\"wordCount\":581,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webdesigndev.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2013\/09\/002647-Atlason.jpg\",\"articleSection\":[\"Design Inspiration\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/\",\"url\":\"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/\",\"name\":\"20 Inspiring Grid-Based Website Designs\",\"isPartOf\":{\"@id\":\"https:\/\/webdesigndev.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2013\/09\/002647-Atlason.jpg\",\"datePublished\":\"2017-08-08T16:26:31+00:00\",\"dateModified\":\"2020-05-09T20:12:55+00:00\",\"description\":\"Grid-based website designs are getting more and more popular these days. The grid-based websites design trend works well especially for responsive layouts.\",\"breadcrumb\":{\"@id\":\"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/#primaryimage\",\"url\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2013\/09\/002647-Atlason.jpg\",\"contentUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2013\/09\/002647-Atlason.jpg\",\"width\":1100,\"height\":517,\"caption\":\"Atlason\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdesigndev.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design Inspiration\",\"item\":\"https:\/\/webdesigndev.com\/inspiration\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"20 Inspiring Grid-Based Website Designs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdesigndev.com\/#website\",\"url\":\"https:\/\/webdesigndev.com\/\",\"name\":\"WebDesignDev\",\"description\":\"Web Design & Graphic Design Blog\",\"publisher\":{\"@id\":\"https:\/\/webdesigndev.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdesigndev.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webdesigndev.com\/#organization\",\"name\":\"WebDesignDev\",\"url\":\"https:\/\/webdesigndev.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg\",\"contentUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg\",\"width\":601,\"height\":196,\"caption\":\"WebDesignDev\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/WebDesignDevBlog\",\"https:\/\/x.com\/WebDesignDev\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194\",\"name\":\"Iggy\",\"description\":\"Iggy is an entrepreneur, blogger, and designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design fonts, themes, plugins, inspiration, and more. You can follow him on Twitter\",\"sameAs\":[\"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988\",\"https:\/\/x.com\/https:\/\/twitter.com\/WebDesignDev\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"20 Inspiring Grid-Based Website Designs","description":"Grid-based website designs are getting more and more popular these days. The grid-based websites design trend works well especially for responsive layouts.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/","og_locale":"en_US","og_type":"article","og_title":"20 Inspiring Grid-Based Website Designs","og_description":"Grid-based website designs are getting more and more popular these days. The grid-based websites design trend works well especially for responsive layouts.","og_url":"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/","og_site_name":"WebDesignDev","article_publisher":"https:\/\/www.facebook.com\/WebDesignDevBlog","article_author":"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988","article_published_time":"2017-08-08T16:26:31+00:00","article_modified_time":"2020-05-09T20:12:55+00:00","og_image":[{"width":1100,"height":517,"url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2013\/09\/002647-Atlason.jpg","type":"image\/jpeg"}],"author":"Iggy","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/WebDesignDev","twitter_site":"@WebDesignDev","twitter_misc":{"Written by":"Iggy","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/#article","isPartOf":{"@id":"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/"},"author":{"name":"Iggy","@id":"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194"},"headline":"20 Inspiring Grid-Based Website Designs","datePublished":"2017-08-08T16:26:31+00:00","dateModified":"2020-05-09T20:12:55+00:00","mainEntityOfPage":{"@id":"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/"},"wordCount":581,"commentCount":0,"publisher":{"@id":"https:\/\/webdesigndev.com\/#organization"},"image":{"@id":"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/#primaryimage"},"thumbnailUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2013\/09\/002647-Atlason.jpg","articleSection":["Design Inspiration"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/","url":"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/","name":"20 Inspiring Grid-Based Website Designs","isPartOf":{"@id":"https:\/\/webdesigndev.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/#primaryimage"},"image":{"@id":"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/#primaryimage"},"thumbnailUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2013\/09\/002647-Atlason.jpg","datePublished":"2017-08-08T16:26:31+00:00","dateModified":"2020-05-09T20:12:55+00:00","description":"Grid-based website designs are getting more and more popular these days. The grid-based websites design trend works well especially for responsive layouts.","breadcrumb":{"@id":"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/#primaryimage","url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2013\/09\/002647-Atlason.jpg","contentUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2013\/09\/002647-Atlason.jpg","width":1100,"height":517,"caption":"Atlason"},{"@type":"BreadcrumbList","@id":"https:\/\/webdesigndev.com\/20-inspiring-grid-based-website-designs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdesigndev.com\/"},{"@type":"ListItem","position":2,"name":"Design Inspiration","item":"https:\/\/webdesigndev.com\/inspiration\/"},{"@type":"ListItem","position":3,"name":"20 Inspiring Grid-Based Website Designs"}]},{"@type":"WebSite","@id":"https:\/\/webdesigndev.com\/#website","url":"https:\/\/webdesigndev.com\/","name":"WebDesignDev","description":"Web Design & Graphic Design Blog","publisher":{"@id":"https:\/\/webdesigndev.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdesigndev.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdesigndev.com\/#organization","name":"WebDesignDev","url":"https:\/\/webdesigndev.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg","contentUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg","width":601,"height":196,"caption":"WebDesignDev"},"image":{"@id":"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/WebDesignDevBlog","https:\/\/x.com\/WebDesignDev"]},{"@type":"Person","@id":"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194","name":"Iggy","description":"Iggy is an entrepreneur, blogger, and designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design fonts, themes, plugins, inspiration, and more. You can follow him on Twitter","sameAs":["https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988","https:\/\/x.com\/https:\/\/twitter.com\/WebDesignDev"]}]}},"_links":{"self":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts\/17937"}],"collection":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/comments?post=17937"}],"version-history":[{"count":0,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts\/17937\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/media\/50098"}],"wp:attachment":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/media?parent=17937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/categories?post=17937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/tags?post=17937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}