{"id":20974,"date":"2015-01-01T08:11:14","date_gmt":"2015-01-01T08:11:14","guid":{"rendered":"http:\/\/vskills.in\/certification\/blog\/?p=20974"},"modified":"2024-04-03T13:14:54","modified_gmt":"2024-04-03T07:44:54","slug":"grid-based-website-layout","status":"publish","type":"post","link":"https:\/\/www.vskills.in\/certification\/blog\/grid-based-website-layout\/","title":{"rendered":"Grid Based Website Layout"},"content":{"rendered":"<p style=\"text-align: center\"><a ref=\"magnificPopup\" href=\"http:\/\/vskills.in\/certification\/blog\/wp-content\/uploads\/2014\/12\/grid-based-website-layout.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-21065\" alt=\"grid-based-website-layout\" src=\"http:\/\/vskills.in\/certification\/blog\/wp-content\/uploads\/2014\/12\/grid-based-website-layout-300x258.jpg\" width=\"300\" height=\"258\" srcset=\"https:\/\/www.vskills.in\/certification\/blog\/wp-content\/uploads\/2014\/12\/grid-based-website-layout-300x258.jpg 300w, https:\/\/www.vskills.in\/certification\/blog\/wp-content\/uploads\/2014\/12\/grid-based-website-layout.jpg 580w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>We have discussed in earlier post why it is better to go for a grid based layout, as it helps to organize and maintain things in a better way.<\/p>\n<p>Now when we build a storyboard it might be difficult to hand code it into CSS to give it the design.<br \/>\nAlso there are certain things to consider whether your content and layout is symmetric or asymmetric.<br \/>\nAnd always remember to give the main content the bigger chunk of the layout in your website, because that is the content people come to see for in your website.<\/p>\n<p>Cool Tip: This post\u2019s cool tip is going to be longer than previous ones and worth fully so, because it is a very helpful technique.<br \/>\nRemember when I said it is difficult to hand code the CSS grid of your choice, the solution to this dilemma is to use Blueprint (http:\/\/www.blueprintcss.org).<br \/>\nBlueprint is a cool website that allows you to specify the grid layout of your choice and it then gives you the CSS copy of that grid layout which you can use in your website.<\/p>\n<p><a href=\"http:\/\/www.vskills.in\/certification\/Web-Development\">Click here for government certification in Web Development<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We have discussed in earlier post why it is better to go for a grid based layout, as it helps to organize and maintain things in a better way. Now when we build a storyboard it might be difficult to hand code it into CSS to give it the design. Also there are certain things&#8230;<\/p>\n","protected":false},"author":384,"featured_media":21065,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[1558],"tags":[1631,1580],"class_list":["post-20974","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development-2","tag-grid-based-website-layout","tag-website-layout"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Grid Based Website Layout - Vskills Blog<\/title>\n<meta name=\"description\" content=\"What is Grid Based Website Layout\" \/>\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.vskills.in\/certification\/blog\/grid-based-website-layout\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Grid Based Website Layout - Vskills Blog\" \/>\n<meta property=\"og:description\" content=\"What is Grid Based Website Layout\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/blog\/grid-based-website-layout\/\" \/>\n<meta property=\"og:site_name\" content=\"Vskills Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-01T08:11:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-03T07:44:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vskills.in\/certification\/blog\/wp-content\/uploads\/2014\/12\/grid-based-website-layout.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"580\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mujthaba Hassan\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mujthaba Hassan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/blog\/grid-based-website-layout\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/blog\/grid-based-website-layout\/\",\"name\":\"Grid Based Website Layout - Vskills Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/blog\/grid-based-website-layout\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/blog\/grid-based-website-layout\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.vskills.in\/certification\/blog\/wp-content\/uploads\/2014\/12\/grid-based-website-layout.jpg\",\"datePublished\":\"2015-01-01T08:11:14+00:00\",\"dateModified\":\"2024-04-03T07:44:54+00:00\",\"author\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/blog\/#\/schema\/person\/14cbb68187ab929c2a7c14f7bed3d66f\"},\"description\":\"What is Grid Based Website Layout\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/blog\/grid-based-website-layout\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/blog\/grid-based-website-layout\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/blog\/grid-based-website-layout\/#primaryimage\",\"url\":\"https:\/\/www.vskills.in\/certification\/blog\/wp-content\/uploads\/2014\/12\/grid-based-website-layout.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/blog\/wp-content\/uploads\/2014\/12\/grid-based-website-layout.jpg\",\"width\":580,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/blog\/grid-based-website-layout\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Grid Based Website Layout\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/blog\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/blog\/\",\"name\":\"Vskills Blog\",\"description\":\"Vskills - A Initiative in Assessment to Enhance Employability\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.vskills.in\/certification\/blog\/#\/schema\/person\/14cbb68187ab929c2a7c14f7bed3d66f\",\"name\":\"Mujthaba Hassan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bef05a751a6f9d5a7a54c2e8618ed66c27f29ea1bd9831ce639f6d7ed8ccc9ff?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bef05a751a6f9d5a7a54c2e8618ed66c27f29ea1bd9831ce639f6d7ed8ccc9ff?s=96&d=mm&r=g\",\"caption\":\"Mujthaba Hassan\"},\"description\":\"I am person with a thirst for knowledge and a strong sense of curiosity. I believe what ever the mind sets out to achieve, it does achieve it in the end if it is perseverant. Feel free to contact me and have a nice chat about technology, business, research or anything fascinating.\",\"url\":\"https:\/\/www.vskills.in\/certification\/blog\/author\/mujthaba-hassan\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Grid Based Website Layout - Vskills Blog","description":"What is Grid Based Website Layout","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.vskills.in\/certification\/blog\/grid-based-website-layout\/","og_locale":"en_US","og_type":"article","og_title":"Grid Based Website Layout - Vskills Blog","og_description":"What is Grid Based Website Layout","og_url":"https:\/\/www.vskills.in\/certification\/blog\/grid-based-website-layout\/","og_site_name":"Vskills Blog","article_publisher":"https:\/\/www.facebook.com\/vskills.in","article_published_time":"2015-01-01T08:11:14+00:00","article_modified_time":"2024-04-03T07:44:54+00:00","og_image":[{"width":580,"height":500,"url":"https:\/\/www.vskills.in\/certification\/blog\/wp-content\/uploads\/2014\/12\/grid-based-website-layout.jpg","type":"image\/jpeg"}],"author":"Mujthaba Hassan","twitter_misc":{"Written by":"Mujthaba Hassan","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/blog\/grid-based-website-layout\/","url":"https:\/\/www.vskills.in\/certification\/blog\/grid-based-website-layout\/","name":"Grid Based Website Layout - Vskills Blog","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vskills.in\/certification\/blog\/grid-based-website-layout\/#primaryimage"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/blog\/grid-based-website-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vskills.in\/certification\/blog\/wp-content\/uploads\/2014\/12\/grid-based-website-layout.jpg","datePublished":"2015-01-01T08:11:14+00:00","dateModified":"2024-04-03T07:44:54+00:00","author":{"@id":"https:\/\/www.vskills.in\/certification\/blog\/#\/schema\/person\/14cbb68187ab929c2a7c14f7bed3d66f"},"description":"What is Grid Based Website Layout","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/blog\/grid-based-website-layout\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/blog\/grid-based-website-layout\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/blog\/grid-based-website-layout\/#primaryimage","url":"https:\/\/www.vskills.in\/certification\/blog\/wp-content\/uploads\/2014\/12\/grid-based-website-layout.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/blog\/wp-content\/uploads\/2014\/12\/grid-based-website-layout.jpg","width":580,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/blog\/grid-based-website-layout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/blog\/"},{"@type":"ListItem","position":2,"name":"Grid Based Website Layout"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/blog\/#website","url":"https:\/\/www.vskills.in\/certification\/blog\/","name":"Vskills Blog","description":"Vskills - A Initiative in Assessment to Enhance Employability","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.vskills.in\/certification\/blog\/#\/schema\/person\/14cbb68187ab929c2a7c14f7bed3d66f","name":"Mujthaba Hassan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bef05a751a6f9d5a7a54c2e8618ed66c27f29ea1bd9831ce639f6d7ed8ccc9ff?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bef05a751a6f9d5a7a54c2e8618ed66c27f29ea1bd9831ce639f6d7ed8ccc9ff?s=96&d=mm&r=g","caption":"Mujthaba Hassan"},"description":"I am person with a thirst for knowledge and a strong sense of curiosity. I believe what ever the mind sets out to achieve, it does achieve it in the end if it is perseverant. Feel free to contact me and have a nice chat about technology, business, research or anything fascinating.","url":"https:\/\/www.vskills.in\/certification\/blog\/author\/mujthaba-hassan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/blog\/wp-json\/wp\/v2\/posts\/20974","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/blog\/wp-json\/wp\/v2\/users\/384"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/blog\/wp-json\/wp\/v2\/comments?post=20974"}],"version-history":[{"count":4,"href":"https:\/\/www.vskills.in\/certification\/blog\/wp-json\/wp\/v2\/posts\/20974\/revisions"}],"predecessor-version":[{"id":71002,"href":"https:\/\/www.vskills.in\/certification\/blog\/wp-json\/wp\/v2\/posts\/20974\/revisions\/71002"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/blog\/wp-json\/wp\/v2\/media\/21065"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/blog\/wp-json\/wp\/v2\/media?parent=20974"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/blog\/wp-json\/wp\/v2\/categories?post=20974"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/blog\/wp-json\/wp\/v2\/tags?post=20974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}