{"id":28713,"date":"2019-12-14T18:19:47","date_gmt":"2019-12-14T10:19:47","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28713"},"modified":"2019-12-13T20:13:47","modified_gmt":"2019-12-13T12:13:47","slug":"gridguide","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/gridguide\/","title":{"rendered":"Automate Your Grid Design Process with GridGuide"},"content":{"rendered":"<p>The first major step of any website design is picking a grid. This typically defines the maximum width of the page along with how many internal columns and gutters will be used to divide the layout.<\/p>\n<p>You can try <a href=\"https:\/\/www.hongkiat.com\/blog\/photoshop-custom-grid\/\">building your own<\/a> but the best tool for this job is <a target=\"_blank\" href=\"http:\/\/grid.guide\/\" rel=\"noopener noreferrer nofollow\">GridGuide<\/a>. It\u2019s a completely free webapp that <strong>fully automates grid generation for any website regardless of size<\/strong>.<\/p>\n<figure><a target=\"_blank\" href=\"http:\/\/grid.guide\/\" rel=\"noopener noreferrer nofollow\"><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/gridguide\/02-gridguide-webapp-grids.jpg\" alt=\"gridguide grids preview\"><\/a><\/figure>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/jquery-grids\/\">The 10 Most Fascinating jQuery Grids<\/a>\n\t\t\t\t<\/p>\n<p>Just put in your desired max width followed by the number of columns you want. Typically these two numbers should be divisible, so it\u2019s a good idea to avoid prime numbers. Here are some common max widths for websites:<\/p>\n<ul>\n<li>1100px by 12 columns<\/li>\n<li>1200px by 8\/12 columns<\/li>\n<li>1240px by 8\/12 columns<\/li>\n<li>1440px by 8\/10\/12 columns<\/li>\n<li>1600px by 8\/10\/12 columns<\/li>\n<\/ul>\n<p>There is absolutely no wrong answer here. You can <strong>pick any width and as long as it\u2019s evenly divisible by the number of columns<\/strong> then you\u2019re good to go.<\/p>\n<p>GridGuide is a snappy webapp so it auto-updates once you enter a value into the input field. So as you adjust the numbers at the top you\u2019ll notice the <strong>grid previews automatically change<\/strong>.<\/p>\n<p>I used to rely on Photoshop for this job and it drove me batty. Honestly creating a grid is one of the most frustrating steps when designing a new website, and getting the numbers pixel-perfect can be infuriating.<\/p>\n<p>But GridGuide is completely automated and it gives you many different grid options based on different column sizes and gutter widths.<\/p>\n<p>You can even <strong>download a full PNG image of the grid you choose to import into Photoshop<\/strong>. This will <strong>save a lot of time<\/strong> so you\u2019re not re-creating grids with shape tools from scratch.<\/p>\n<p>And if you like a certain grid style you can generate a <a target=\"_blank\" href=\"http:\/\/grid.guide\/#\/1600\/12\/115\/20\/0\" rel=\"noopener noreferrer nofollow\">share link<\/a> to bookmark for later or to share with others on the web.<\/p>\n<figure><a target=\"_blank\" href=\"http:\/\/grid.guide\/\" rel=\"noopener noreferrer nofollow\"><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/gridguide\/02-share-link-gridguide.jpg\" alt=\"gridguide share link\"><\/a><\/figure>\n<p>For a tool that\u2019s completely free and so easy to use this has to be my top recommendation for every single web designer. If you struggle with grids and hate designing your own then <a target=\"_blank\" href=\"http:\/\/grid.guide\/\" rel=\"noopener noreferrer nofollow\">GridGuide<\/a> is a must-have resource in your toolbox.<\/p>\n\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css-grid-wordpress\/\">How to Integrate Simple CSS Grid Layouts into WordPress<\/a>\n\t\t\t\t<\/p>","protected":false},"excerpt":{"rendered":"<p>The first major step of any website design is picking a grid. This typically defines the maximum width of the page along with how many internal columns and gutters will be used to divide the layout. You can try building your own but the best tool for this job is GridGuide. It\u2019s a completely free&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[3064],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Automate Your Grid Design Process with GridGuide - Hongkiat<\/title>\n<meta name=\"description\" content=\"The first major step of any website design is picking a grid. This typically defines the maximum width of the page along with how many internal columns\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/gridguide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Automate Your Grid Design Process with GridGuide\" \/>\n<meta property=\"og:description\" content=\"The first major step of any website design is picking a grid. This typically defines the maximum width of the page along with how many internal columns\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/gridguide\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-14T10:19:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/gridguide\/02-gridguide-webapp-grids.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gridguide\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gridguide\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Automate Your Grid Design Process with GridGuide\",\"datePublished\":\"2019-12-14T10:19:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gridguide\\\/\"},\"wordCount\":357,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gridguide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/gridguide\\\/02-gridguide-webapp-grids.jpg\",\"keywords\":[\"Design Tools\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gridguide\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gridguide\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gridguide\\\/\",\"name\":\"Automate Your Grid Design Process with GridGuide - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gridguide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gridguide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/gridguide\\\/02-gridguide-webapp-grids.jpg\",\"datePublished\":\"2019-12-14T10:19:47+00:00\",\"description\":\"The first major step of any website design is picking a grid. This typically defines the maximum width of the page along with how many internal columns\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gridguide\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gridguide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gridguide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/gridguide\\\/02-gridguide-webapp-grids.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/gridguide\\\/02-gridguide-webapp-grids.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/gridguide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Automate Your Grid Design Process with GridGuide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Automate Your Grid Design Process with GridGuide - Hongkiat","description":"The first major step of any website design is picking a grid. This typically defines the maximum width of the page along with how many internal columns","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:\/\/www.hongkiat.com\/blog\/gridguide\/","og_locale":"en_US","og_type":"article","og_title":"Automate Your Grid Design Process with GridGuide","og_description":"The first major step of any website design is picking a grid. This typically defines the maximum width of the page along with how many internal columns","og_url":"https:\/\/www.hongkiat.com\/blog\/gridguide\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-12-14T10:19:47+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/gridguide\/02-gridguide-webapp-grids.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/gridguide\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/gridguide\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Automate Your Grid Design Process with GridGuide","datePublished":"2019-12-14T10:19:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/gridguide\/"},"wordCount":357,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/gridguide\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/gridguide\/02-gridguide-webapp-grids.jpg","keywords":["Design Tools"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/gridguide\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/gridguide\/","url":"https:\/\/www.hongkiat.com\/blog\/gridguide\/","name":"Automate Your Grid Design Process with GridGuide - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/gridguide\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/gridguide\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/gridguide\/02-gridguide-webapp-grids.jpg","datePublished":"2019-12-14T10:19:47+00:00","description":"The first major step of any website design is picking a grid. This typically defines the maximum width of the page along with how many internal columns","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/gridguide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/gridguide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/gridguide\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/gridguide\/02-gridguide-webapp-grids.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/gridguide\/02-gridguide-webapp-grids.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/gridguide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Automate Your Grid Design Process with GridGuide"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7t7","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28713","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=28713"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28713\/revisions"}],"predecessor-version":[{"id":49124,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28713\/revisions\/49124"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=28713"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=28713"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=28713"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=28713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}