{"id":54,"date":"2022-09-07T08:35:36","date_gmt":"2022-09-07T08:35:36","guid":{"rendered":"https:\/\/300mind.studio\/blog\/web-stories\/grid-layout-design-best-practices\/"},"modified":"2024-05-21T08:18:13","modified_gmt":"2024-05-21T08:18:13","slug":"grid-layout-design-best-practices","status":"publish","type":"web-story","link":"https:\/\/300mind.studio\/blog\/web-stories\/grid-layout-design-best-practices\/","title":{"rendered":"Grid Layout Design &#8211; A Complete Guide"},"content":{"rendered":"<p><html amp=\"\" lang=\"en\"><head><meta charSet=\"utf-8\"\/><meta name=\"viewport\" content=\"width=device-width,minimum-scale=1,initial-scale=1\"\/><script async=\"\" src=\"https:\/\/cdn.ampproject.org\/v0.js\"><\/script><script async=\"\" src=\"https:\/\/cdn.ampproject.org\/v0\/amp-story-1.0.js\" custom-element=\"amp-story\"><\/script><link href=\"https:\/\/fonts.googleapis.com\/css2?display=swap&amp;family=Roboto%3Awght%40400%3B700\" rel=\"stylesheet\"\/><link href=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-front.png\" rel=\"preload\" as=\"image\"\/>\n<style amp-boilerplate=\"\">body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}<\/style>\n<p><noscript><\/p>\n<style amp-boilerplate=\"\">body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}<\/style>\n<p><\/noscript><\/p>\n<style amp-custom=\"\">\n              h1, h2, h3 { font-weight: normal; }<\/p>\n<p>              amp-story-page {\n                background-color: #131516;\n              }<\/p>\n<p>              amp-story-grid-layer {\n                overflow: visible;\n              }<\/p>\n<p>              @media (max-aspect-ratio: 9 \/ 16)  {\n                @media (min-aspect-ratio: 320 \/ 678) {\n                  amp-story-grid-layer.grid-layer {\n                    margin-top: calc((100% \/ 0.5625 - 100% \/ 0.6666666666666666) \/ 2);\n                  }\n                }\n              }<\/p>\n<p>              @media not all and (min-resolution:.001dpcm) {\n                @media {\n                  p.text-wrapper > span {\n                    font-size: calc(100% - 0.5px);\n                  }\n                }\n              }<\/p>\n<p>              .page-fullbleed-area,\n              .page-background-overlay-area {\n                position: absolute;\n                overflow: hidden;\n                width: 100%;\n                left: 0;\n                height: calc(1.1851851851851851 * 100%);\n                top: calc((1 - 1.1851851851851851) * 100% \/ 2);\n              }<\/p>\n<p>              .element-overlay-area {\n                position: absolute;\n                width: 100%;\n                height: 100%;\n                top: 0;\n                left: 0;\n              }<\/p>\n<p>              .page-safe-area {\n                overflow: visible;\n                position: absolute;\n                top: 0;\n                bottom: 0;\n                left: 0;\n                right: 0;\n                width: 100%;\n                height: calc(0.84375 * 100%);\n                margin: auto 0;\n              }<\/p>\n<p>              .mask {\n                position: absolute;\n                overflow: hidden;\n              }<\/p>\n<p>              .fill {\n                position: absolute;\n                top: 0;\n                left: 0;\n                right: 0;\n                bottom: 0;\n                margin: 0;\n              }<\/p>\n<p>              @media (prefers-reduced-motion: no-preference) {\n                .animation-wrapper {\n                  opacity: var(--initial-opacity);\n                  transform: var(--initial-transform);\n                }\n              }<\/p>\n<p>              amp-story-grid-layer.align-bottom {\n                align-content: end;\n                padding: 0;\n                \/* \n                  AMP CTA Layer will exactly occupy 74px regardless of any device.\n                  To space out captions 74px from the BOTTOM (AMP CTA Layer),\n                  74px from the TOP should also be spaced out and thus: 2 * 74px\n                  will be the desired max-height.\n                *\/\n                max-height: calc(100vh - (2 * 74px));\n              }<\/p>\n<p>              .captions-area {\n                padding: 0 32px 0;\n              }<\/p>\n<p>              amp-story-captions {\n                margin-bottom: 16px;\n                text-align: center;\n              }\n              <\/style>\n<p><meta name=\"web-stories-replace-head-start\"\/><title>Grid Layout Design &#8211; A Complete Guide<\/title><link rel=\"canonical\" href=\"https:\/\/300mind.studio\/blog\/web-stories\/grid-layout-design-best-practices\/\"\/><meta name=\"web-stories-replace-head-end\"\/><\/head><body><amp-story standalone=\"\" publisher=\"300Mind Blog\" publisher-logo-src=\"https:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/300mind-200.png\" title=\"Grid Layout Design - A Complete Guide\" poster-portrait-src=\"https:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-design-poster.png\"><amp-story-page id=\"956b2a55-353a-404c-bbf2-153e8a3ff12b\" auto-advance-after=\"7s\"><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#9cece4\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-97803fe6-6d60-48cb-afc3-7879b39f97ca\">\n<div style=\"position:absolute;width:100%;height:100%;left:0%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-front.png\" alt=\"grid layout front\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-front.png 1080w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-front-576x1024.png 576w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-front-169x300.png 169w\" sizes=\"(min-width: 1024px) 45vh, 100vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:16.74757%;top:0;width:66.26214%;height:17.31392%;transform:rotate(360deg);opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.7326007326007326% 0.7326007326007326% 0.7326007326007326% 0.7326007326007326% \/ 1.8691588785046727% 1.8691588785046727% 1.8691588785046727% 1.8691588785046727%\" id=\"el-da2b1973-b6d9-4944-ad11-684d8110f221\">\n<h1 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.23179945054945056% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.728155em;line-height:1.2;text-align:left;padding:0;color:#000000\"><span><span style=\"font-weight: 700; color: #3f8fd4\">Grid Layout Design<\/span><\/span><\/h1>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:16.99029%;top:19.25566%;width:67.23301%;height:4.69256%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.7220216606498195% 0.7220216606498195% 0.7220216606498195% 0.7220216606498195% \/ 6.896551724137931% 6.896551724137931% 6.896551724137931% 6.896551724137931%\" id=\"el-781b531b-7401-4048-b003-47c7305e6b3f\">\n<h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.12691787003610108% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.404531em;line-height:1.2;text-align:left;padding:0;color:#000000\"><span><span style=\"font-weight: 700\">Best Practices to Follow<\/span><\/span><\/h2>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:0;top:29.77346%;width:100%;height:74.43366%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-4064ce33-565f-4e8a-b781-45df0e6be81c\">\n<div style=\"position:absolute;width:101.20743%;height:100%;left:-0.60372%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-design-vector.png\" alt=\"grid layout design vector\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-design-vector.png 785w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-design-vector-272x300.png 272w\" sizes=\"(min-width: 1024px) 45vh, 100vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"813013b0-6908-4fce-9368-e8b17560eb87\" auto-advance-after=\"7s\"><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#9cece4\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-a95e0b93-b494-4c65-8f29-b18c8d817965\">\n<div style=\"position:absolute;width:100%;height:100%;left:0%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-front.png\" alt=\"grid layout front\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-front.png 1080w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-front-576x1024.png 576w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-front-169x300.png 169w\" sizes=\"(min-width: 1024px) 45vh, 100vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:12.13592%;top:20.87379%;width:75.97087%;height:15.21036%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6389776357827476% 0.6389776357827476% 0.6389776357827476% 0.6389776357827476% \/ 2.127659574468085% 2.127659574468085% 2.127659574468085% 2.127659574468085%\" id=\"el-7b5accc9-b80f-4a6d-93b6-466e7fc8c822\">\n<h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.1158146964856221% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.647249em;line-height:1.19;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #3f8fd4\">What is a Grid Layout Design?<\/span><\/span><\/h2>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:12.13592%;top:44.66019%;width:75.97087%;height:43.68932%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6389776357827476% 0.6389776357827476% 0.6389776357827476% 0.6389776357827476% \/ 0.7407407407407408% 0.7407407407407408% 0.7407407407407408% 0.7407407407407408%\" id=\"el-c6ec2efd-b32f-4816-aaf7-add9e50d011b\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11232028753993611% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.404531em;line-height:1.2;text-align:left;padding:0;color:#000000\"><span>The website grid is a method of arranging content on a page, as well as generating alignment and order.<\/p>\n<p>It act as the skeleton or fundamental framework of user interface.<\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:6.79612%;top:-9.70874%;width:87.37864%;height:30.42071%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-3fe1075c-4dae-401a-9375-a3e0c17295ef\">\n<div style=\"position:absolute;width:100%;height:100.55992%;left:0%;top:-0.27996%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/responsive-grid-css.jpeg\" alt=\"responsive grid\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/responsive-grid-css.jpeg 1710w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/responsive-grid-css-1024x538.jpeg 1024w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/responsive-grid-css-300x158.jpeg 300w\" sizes=\"(min-width: 1024px) 39vh, 87vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"27015668-e561-4070-974e-bc4967507366\" auto-advance-after=\"7s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-71dfc6d0-dd03-49a7-9ce9-a5736eb6b0e1\",\"keyframes\":{\"transform\":[\"translate3d(-135.03651%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-fa03a241-2b8e-4dca-8668-6b8ab96d3878\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-dbfd6f74-780b-4528-b8ec-693974fab487\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#04649c\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-d3992025-b256-4998-894d-5d0eeb3b4f87\">\n<div style=\"position:absolute;width:100%;height:100%;left:0%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png\" alt=\"grid layout background\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png 1080w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png 576w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png 169w\" sizes=\"(min-width: 1024px) 47vh, 105vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:12.13592%;top:1.2945%;width:76.21359%;height:15.21036%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6369426751592357% 0.6369426751592357% 0.6369426751592357% 0.6369426751592357% \/ 2.127659574468085% 2.127659574468085% 2.127659574468085% 2.127659574468085%\" id=\"el-feadf884-275c-4d9c-9af4-92850dbf6c00\">\n<h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11544585987261055% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.647249em;line-height:1.19;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #fff\">Types of Grid Layouts<\/span><\/span><\/h2>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:12.13592%;top:22.00647%;width:75.97087%;height:38.83495%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6389776357827476% 0.6389776357827476% 0.6389776357827476% 0.6389776357827476% \/ 0.8333333333333334% 0.8333333333333334% 0.8333333333333334% 0.8333333333333334%\" id=\"el-d17bf189-52c1-414a-a1a6-c8680a965f4e\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11232028753993611% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.404531em;line-height:1.2;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #eee\">There are five types of layout grids:<\/span><\/p>\n<p><span style=\"color: #eee\">1.&nbsp;Column Grid<\/span><br \/>\n<span style=\"color: #eee\">2.&nbsp;Manuscript Grid<\/span><br \/>\n<span style=\"color: #eee\">3.&nbsp;Modular Grid<\/span><br \/>\n<span style=\"color: #eee\">4.&nbsp;Hierarchical Grid<\/span><br \/>\n<span style=\"color: #eee\">5.&nbsp;Baseline Grid<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:12.13592%;top:69.7411%;width:50.72816%;height:4.04531%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.9569377990430622% 0.9569377990430622% 0.9569377990430622% 0.9569377990430622% \/ 8% 8% 8% 8%\" id=\"el-45a9c0a0-d240-4e86-a8b7-7be4844ecaa8\">\n<h3 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.14533492822966548% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.349515em;line-height:1.2;text-align:left;padding:0;color:#000000\"><span><span style=\"font-weight: 700; color: #fff\">Check it out in detail<\/span><\/span><\/h3>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:11.65049%;top:76.05178%;width:33.25243%;height:11.8123%;opacity:1\">\n<div id=\"anim-71dfc6d0-dd03-49a7-9ce9-a5736eb6b0e1\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-135.03651%, 0px, 0)\">\n<div id=\"anim-fa03a241-2b8e-4dca-8668-6b8ab96d3878\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-dbfd6f74-780b-4528-b8ec-693974fab487\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-6b753534-adc6-47b8-bc62-85a28defbf85\"><svg style=\"display:block;position:absolute;top:0;height:100%;width:auto\" viewBox=\"0 0 17 9\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><title>Arrow<\/title><path d=\"M15.9436 4.43653c.2145-.21452.2145-.56234 0-.77687L12.4477.163723c-.2146-.2145286-.5624-.2145286-.7769 0-.2145.214527-.2145.562346 0 .776874L14.7783 4.0481l-3.1075 3.10749c-.2145.21453-.2145.56235 0 .77688s.5623.21453.7769 0l3.4959-3.49594zm-15.769772.1609H15.5552V3.49876H.173828v1.09867z\" fill=\"#FFECE3\"><\/path><\/svg><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"f7f1a1c9-8948-46ca-b322-4f5111d41bfb\" auto-advance-after=\"7s\"><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#04649c\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-1ecd179a-4cd8-48fa-8508-c97e2968ee36\">\n<div style=\"position:absolute;width:100%;height:100%;left:0%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png\" alt=\"grid layout background\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png 1080w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png 576w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png 169w\" sizes=\"(min-width: 1024px) 47vh, 105vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:12.13592%;top:0;width:76.21359%;height:7.60518%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6369426751592357% 0.6369426751592357% 0.6369426751592357% 0.6369426751592357% \/ 4.25531914893617% 4.25531914893617% 4.25531914893617% 4.25531914893617%\" id=\"el-857880ee-97f9-4143-bfea-7fcac763ea0b\">\n<h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11544585987261055% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.647249em;line-height:1.19;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #fff\">1.&nbsp;Column Grid<\/span><\/span><\/h2>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:12.13592%;top:15.53398%;width:75.97087%;height:19.25566%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6389776357827476% 0.6389776357827476% 0.6389776357827476% 0.6389776357827476% \/ 1.680672268907563% 1.680672268907563% 1.680672268907563% 1.680672268907563%\" id=\"el-21b72ea7-4e8f-4418-b9fc-095ad2f24249\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11232028753993611% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.404531em;line-height:1.2;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #eee\">These are made up of columns and are used to organize multiple components.<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:4.36893%;top:42.71845%;width:91.74757%;height:44.66019%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-17dfc197-b51f-4261-93d0-d2dc97f9c46a\">\n<div style=\"position:absolute;width:129.92147%;height:100%;left:-14.96074%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/column-grid.png\" alt=\"column grid\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/column-grid.png 1000w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/column-grid-300x169.png 300w\" sizes=\"(min-width: 1024px) 41vh, 92vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"a33124b3-6547-451b-8a00-f79d51d20d26\" auto-advance-after=\"7s\"><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#04649c\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-24a5a44b-3ab8-4730-9584-c2c6f48a1d50\">\n<div style=\"position:absolute;width:100%;height:100%;left:0%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png\" alt=\"grid layout background\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png 1080w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png 576w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png 169w\" sizes=\"(min-width: 1024px) 47vh, 105vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:12.13592%;top:0;width:76.21359%;height:15.21036%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6369426751592357% 0.6369426751592357% 0.6369426751592357% 0.6369426751592357% \/ 2.127659574468085% 2.127659574468085% 2.127659574468085% 2.127659574468085%\" id=\"el-61245be8-6955-42e5-bef8-29ed5cc276e7\">\n<h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11544585987261055% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.647249em;line-height:1.19;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #fff\">2.&nbsp;Manuscript Grid<\/span><\/span><\/h2>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:11.8932%;top:20.38835%;width:75.97087%;height:14.56311%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6389776357827476% 0.6389776357827476% 0.6389776357827476% 0.6389776357827476% \/ 2.2222222222222223% 2.2222222222222223% 2.2222222222222223% 2.2222222222222223%\" id=\"el-68331257-dbf6-48b7-9a66-2d5381e8e8b3\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11232028753993611% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.404531em;line-height:1.2;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #eee\">It is always present in a Word document or a presentation template.<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:3.15534%;top:41.58576%;width:93.4466%;height:46.60194%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-888925b9-d446-4393-a5fb-4f1c5e497d5b\">\n<div style=\"position:absolute;width:124.67532%;height:100%;left:-12.33766%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/manuscript-grid.png\" alt=\"manuscript grid\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/manuscript-grid.png 1000w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/manuscript-grid-300x180.png 300w\" sizes=\"(min-width: 1024px) 42vh, 93vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"7e92eea0-245d-46b6-8bf9-182f5e80c482\" auto-advance-after=\"7s\"><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#04649c\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-8caed9f4-2d13-4128-b5ef-8165fa09a530\">\n<div style=\"position:absolute;width:100%;height:100%;left:0%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png\" alt=\"grid layout background\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png 1080w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png 576w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png 169w\" sizes=\"(min-width: 1024px) 47vh, 105vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:12.13592%;top:0;width:76.21359%;height:7.60518%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6369426751592357% 0.6369426751592357% 0.6369426751592357% 0.6369426751592357% \/ 4.25531914893617% 4.25531914893617% 4.25531914893617% 4.25531914893617%\" id=\"el-ce0820d1-de41-4959-a792-09d39819eef3\">\n<h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11544585987261055% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.647249em;line-height:1.19;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #fff\">3.&nbsp;Modular Grid<\/span><\/span><\/h2>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:12.13592%;top:15.53398%;width:75.97087%;height:14.56311%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6389776357827476% 0.6389776357827476% 0.6389776357827476% 0.6389776357827476% \/ 2.2222222222222223% 2.2222222222222223% 2.2222222222222223% 2.2222222222222223%\" id=\"el-e2db998c-65f3-4801-836e-f7463a7653d5\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11232028753993611% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.404531em;line-height:1.2;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #eee\">It is similar to a column grid but use to organize more elements.<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:3.15534%;top:41.58576%;width:93.4466%;height:46.60194%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-0e44731f-f261-4b29-9212-432c49d19ff7\">\n<div style=\"position:absolute;width:124.67532%;height:100%;left:-12.33766%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/modular-grid.png\" alt=\"modular grid\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/modular-grid.png 1000w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/modular-grid-300x180.png 300w\" sizes=\"(min-width: 1024px) 42vh, 93vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"e8ed9867-e3a0-4119-8d71-a061235c82fa\" auto-advance-after=\"7s\"><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#04649c\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-7f7e34f6-d7af-4788-8914-6503554eefaf\">\n<div style=\"position:absolute;width:100%;height:100%;left:0%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png\" alt=\"grid layout background\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png 1080w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png 576w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png 169w\" sizes=\"(min-width: 1024px) 47vh, 105vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:12.13592%;top:0;width:76.21359%;height:15.21036%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6369426751592357% 0.6369426751592357% 0.6369426751592357% 0.6369426751592357% \/ 2.127659574468085% 2.127659574468085% 2.127659574468085% 2.127659574468085%\" id=\"el-89f6d0b7-d6f0-4eb4-9288-19d17e0a92a7\">\n<h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11544585987261055% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.647249em;line-height:1.19;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #fff\">4.&nbsp;Hierarchical Grid<\/span><\/span><\/h2>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:11.8932%;top:20.38835%;width:75.97087%;height:19.25566%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6389776357827476% 0.6389776357827476% 0.6389776357827476% 0.6389776357827476% \/ 1.680672268907563% 1.680672268907563% 1.680672268907563% 1.680672268907563%\" id=\"el-309904a3-0e52-437a-8413-7af4a5254ff2\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11232028753993611% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.404531em;line-height:1.2;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #eee\">A freestyle grid where pieces are \u201cspontaneously\u201d arranged among the columns and rows.<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:3.15534%;top:44.82201%;width:93.4466%;height:46.60194%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-f338182e-977e-414e-b667-f12d2c15a35c\">\n<div style=\"position:absolute;width:124.67532%;height:100%;left:-12.33766%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/hierarchical-grid.png\" alt=\"hierarchical grid\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/hierarchical-grid.png 1000w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/hierarchical-grid-300x180.png 300w\" sizes=\"(min-width: 1024px) 42vh, 93vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"07de4906-6b9e-4140-bc51-989f863eb748\" auto-advance-after=\"7s\"><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#04649c\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-f9336bce-3037-496e-b025-74c6ea146b44\">\n<div style=\"position:absolute;width:100%;height:100%;left:0%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png\" alt=\"grid layout background\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png 1080w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png 576w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png 169w\" sizes=\"(min-width: 1024px) 47vh, 105vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:12.13592%;top:0;width:76.21359%;height:7.60518%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6369426751592357% 0.6369426751592357% 0.6369426751592357% 0.6369426751592357% \/ 4.25531914893617% 4.25531914893617% 4.25531914893617% 4.25531914893617%\" id=\"el-9d170725-2204-4461-adae-e81c88379b40\">\n<h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11544585987261055% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.647249em;line-height:1.19;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #fff\">5.&nbsp;Baseline Grid<\/span><\/span><\/h2>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:12.13592%;top:15.53398%;width:75.97087%;height:9.70874%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6389776357827476% 0.6389776357827476% 0.6389776357827476% 0.6389776357827476% \/ 3.3333333333333335% 3.3333333333333335% 3.3333333333333335% 3.3333333333333335%\" id=\"el-b1835064-594d-4841-ae88-3167975f0428\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11232028753993611% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.404531em;line-height:1.2;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #eee\">A baseline is a line on which text is placed.<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:4.61165%;top:41.90939%;width:91.01942%;height:44.66019%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-144b6e9d-dab3-4efe-acaf-df49dd22183d\">\n<div style=\"position:absolute;width:130.96084%;height:100%;left:-15.48042%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/baseline-grid.png\" alt=\"baseline grid\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/baseline-grid.png 1000w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/baseline-grid-300x169.png 300w\" sizes=\"(min-width: 1024px) 41vh, 91vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"a7008ebb-88ae-4c80-93de-8d79c3591c53\" auto-advance-after=\"7s\"><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#04649c\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-8f1c9112-3df9-4808-b2be-6dce8078a3f6\">\n<div style=\"position:absolute;width:100%;height:100%;left:0%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png\" alt=\"grid layout background\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png 1080w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png 576w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png 169w\" sizes=\"(min-width: 1024px) 47vh, 105vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:12.13592%;top:1.2945%;width:76.21359%;height:22.97735%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6369426751592357% 0.6369426751592357% 0.6369426751592357% 0.6369426751592357% \/ 1.4084507042253522% 1.4084507042253522% 1.4084507042253522% 1.4084507042253522%\" id=\"el-26aa4d1a-bfe8-4a64-bdf6-6ab37b06deb0\">\n<h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11544585987261055% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.647249em;line-height:1.19;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #fff\">Key Benefits of Using Grid Layout<\/span><\/span><\/h2>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:12.13592%;top:25.24272%;width:75.97087%;height:33.81877%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6389776357827476% 0.6389776357827476% 0.6389776357827476% 0.6389776357827476% \/ 0.9569377990430622% 0.9569377990430622% 0.9569377990430622% 0.9569377990430622%\" id=\"el-4272b7e2-334a-47fa-be4c-076ac8116668\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11232028753993611% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.404531em;line-height:1.2;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #eee\">There are many benefits of using a grid layout:<\/span><\/p>\n<p><span style=\"color: #eee\">&#8211;&nbsp;Efficiency &amp; Consistency<\/span><br \/>\n<span style=\"color: #eee\">&#8211; Clarity and Order<\/span><br \/>\n<span style=\"color: #eee\">&#8211;&nbsp;Quicker Process<\/span><br \/>\n<span style=\"color: #eee\">&#8211;&nbsp;Easy to Modify<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:42.71845%;top:65.53398%;width:56.31068%;height:43.52751%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-3fca0f76-db8d-4f15-b4e2-0be7a615c864\">\n<div style=\"position:absolute;width:105.10323%;height:100%;left:-2.55162%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-design-vector.png\" alt=\"grid layout design vector\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-design-vector.png 785w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-design-vector-272x300.png 272w\" sizes=\"(min-width: 1024px) 25vh, 56vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"23fed37d-28c9-475c-8ba5-4a04c5f113da\" auto-advance-after=\"7s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-1e65cf56-b7d4-4aaa-ac9d-ce1d689a1ee1\",\"keyframes\":{\"transform\":[\"translate3d(-135.03651%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-946ac8f4-f3ad-472e-9c9a-ad1b83ff150f\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-802765d1-9575-4fe5-a285-17b7a771af9d\",\"keyframes\":{\"transform\":[\"scale(0.15)\",\"scale(1)\"]},\"delay\":0,\"duration\":600,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#04649c\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-d96adbdb-85f8-4c17-b0ed-8d157c6b1c44\">\n<div style=\"position:absolute;width:100%;height:100%;left:0%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png\" alt=\"grid layout background\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png 1080w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png 576w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png 169w\" sizes=\"(min-width: 1024px) 47vh, 105vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:12.13592%;top:1.2945%;width:76.21359%;height:22.97735%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6369426751592357% 0.6369426751592357% 0.6369426751592357% 0.6369426751592357% \/ 1.4084507042253522% 1.4084507042253522% 1.4084507042253522% 1.4084507042253522%\" id=\"el-a411a13a-530a-4a32-bb66-46af8efb7855\">\n<h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11544585987261055% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.647249em;line-height:1.19;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #fff\">Best Practices of Using Grids in Design<\/span><\/span><\/h2>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:12.13592%;top:28.47896%;width:75.97087%;height:38.83495%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6389776357827476% 0.6389776357827476% 0.6389776357827476% 0.6389776357827476% \/ 0.8333333333333334% 0.8333333333333334% 0.8333333333333334% 0.8333333333333334%\" id=\"el-c197bafe-5d59-483c-9a38-1da8c3c45515\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11232028753993611% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.404531em;line-height:1.2;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #eee\">Here are our four best practices to follow:<\/span><\/p>\n<p><span style=\"color: #eee\">&#8211;&nbsp;Select the Needed Grid<\/span><br \/>\n<span style=\"color: #eee\">&#8211;&nbsp;Keep Constraints in Mind<\/span><br \/>\n<span style=\"color: #eee\">&#8211;&nbsp;Grids for Mobile<\/span><br \/>\n<span style=\"color: #eee\">&#8211;&nbsp;Pay Attention to Vertical &amp; Horizontal Spacing<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:12.13592%;top:81.06796%;width:50.72816%;height:4.04531%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.9569377990430622% 0.9569377990430622% 0.9569377990430622% 0.9569377990430622% \/ 8% 8% 8% 8%\" id=\"el-2f8c1116-f6ef-46ed-97b2-3122196e2152\">\n<h3 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.14533492822966548% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.349515em;line-height:1.2;text-align:left;padding:0;color:#000000\"><span><span style=\"font-weight: 700; color: #fff\">Check it out in detail<\/span><\/span><\/h3>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:11.65049%;top:87.37864%;width:33.25243%;height:11.8123%;opacity:1\">\n<div id=\"anim-1e65cf56-b7d4-4aaa-ac9d-ce1d689a1ee1\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-135.03651%, 0px, 0)\">\n<div id=\"anim-946ac8f4-f3ad-472e-9c9a-ad1b83ff150f\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-802765d1-9575-4fe5-a285-17b7a771af9d\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.15)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-5ed25058-29df-4f56-b3a0-94d3ab333c47\"><svg style=\"display:block;position:absolute;top:0;height:100%;width:auto\" viewBox=\"0 0 17 9\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><title>Arrow<\/title><path d=\"M15.9436 4.43653c.2145-.21452.2145-.56234 0-.77687L12.4477.163723c-.2146-.2145286-.5624-.2145286-.7769 0-.2145.214527-.2145.562346 0 .776874L14.7783 4.0481l-3.1075 3.10749c-.2145.21453-.2145.56235 0 .77688s.5623.21453.7769 0l3.4959-3.49594zm-15.769772.1609H15.5552V3.49876H.173828v1.09867z\" fill=\"#FFECE3\"><\/path><\/svg><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"a54fcff0-4d07-42ab-a630-b4b5bfb75896\" auto-advance-after=\"7s\"><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#04649c\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-a7880a4d-4723-4754-a170-97ee6f1e61f8\">\n<div style=\"position:absolute;width:100%;height:100%;left:0%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png\" alt=\"grid layout background\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png 1080w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png 576w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png 169w\" sizes=\"(min-width: 1024px) 47vh, 105vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:12.13592%;top:0;width:76.21359%;height:15.21036%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6369426751592357% 0.6369426751592357% 0.6369426751592357% 0.6369426751592357% \/ 2.127659574468085% 2.127659574468085% 2.127659574468085% 2.127659574468085%\" id=\"el-6e89c0cc-f563-44cb-ad70-33af734d296e\">\n<h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11544585987261055% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.647249em;line-height:1.19;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #fff\">Select the Grid That\u2019s Needed<\/span><\/span><\/h2>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:11.8932%;top:20.38835%;width:76.69903%;height:19.25566%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6329113924050633% 0.6329113924050633% 0.6329113924050633% 0.6329113924050633% \/ 1.680672268907563% 1.680672268907563% 1.680672268907563% 1.680672268907563%\" id=\"el-74c2e8de-61f8-419c-8a0b-380d518dc44c\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11125395569620254% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.404531em;line-height:1.2;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #eee\">When selecting a grid, choose one with the number of columns that your design requires.<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:2.42718%;top:48.38188%;width:92.71845%;height:40.29126%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-df79eadf-a5c0-4332-a520-8df5950bd3b5\">\n<div style=\"position:absolute;width:108.63873%;height:100%;left:-4.31937%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/select-grid.png\" alt=\"select the grid that&#x27;s needed\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/select-grid.png 1000w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/select-grid-300x180.png 300w\" sizes=\"(min-width: 1024px) 42vh, 93vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"5fa8b49f-b7c7-4c91-9fd5-db09bd5d0f07\" auto-advance-after=\"7s\"><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#04649c\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-e92470d0-4925-4540-968d-b943e7ddc781\">\n<div style=\"position:absolute;width:100%;height:100%;left:0%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png\" alt=\"grid layout background\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png 1080w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png 576w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png 169w\" sizes=\"(min-width: 1024px) 47vh, 105vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:12.13592%;top:0;width:76.21359%;height:15.21036%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6369426751592357% 0.6369426751592357% 0.6369426751592357% 0.6369426751592357% \/ 2.127659574468085% 2.127659574468085% 2.127659574468085% 2.127659574468085%\" id=\"el-7a0c0cc0-5371-4a27-86be-2674a8889f7d\">\n<h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11544585987261055% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.647249em;line-height:1.19;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #fff\">Keep Constraints in Mind<\/span><\/span><\/h2>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:11.8932%;top:20.38835%;width:75.97087%;height:19.25566%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6389776357827476% 0.6389776357827476% 0.6389776357827476% 0.6389776357827476% \/ 1.680672268907563% 1.680672268907563% 1.680672268907563% 1.680672268907563%\" id=\"el-b8b9980d-8e06-4094-a292-182171efa426\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11232028753993611% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.404531em;line-height:1.2;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #eee\">Keeping constraints in mind helps you to concentrate on what is truly essential to your users.<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:6.31068%;top:50.16181%;width:86.8932%;height:42.88026%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-9d2d1ba3-ea9d-41f8-a680-2764d34bf04a\">\n<div style=\"position:absolute;width:131.71237%;height:100%;left:-15.85618%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/constraints.png\" alt=\"keep constraints in mind\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/constraints.png 1000w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/constraints-300x169.png 300w\" sizes=\"(min-width: 1024px) 39vh, 87vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"e897161a-f4c7-469b-86b6-35aeb3a0e2db\" auto-advance-after=\"7s\"><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#04649c\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-9b242fae-2b39-455c-9846-84639254e2ba\">\n<div style=\"position:absolute;width:100%;height:100%;left:0%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png\" alt=\"grid layout background\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png 1080w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png 576w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png 169w\" sizes=\"(min-width: 1024px) 47vh, 105vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:12.13592%;top:0;width:76.21359%;height:15.21036%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6369426751592357% 0.6369426751592357% 0.6369426751592357% 0.6369426751592357% \/ 2.127659574468085% 2.127659574468085% 2.127659574468085% 2.127659574468085%\" id=\"el-300680db-e35b-4c12-85ac-ca19eac185dc\">\n<h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11544585987261055% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.647249em;line-height:1.19;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #fff\">Pay Attention to Spacing<\/span><\/span><\/h2>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:11.8932%;top:20.38835%;width:75.97087%;height:19.25566%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6389776357827476% 0.6389776357827476% 0.6389776357827476% 0.6389776357827476% \/ 1.680672268907563% 1.680672268907563% 1.680672268907563% 1.680672268907563%\" id=\"el-980d3f33-d639-4b80-9202-d86e8b6a989a\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11232028753993611% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.404531em;line-height:1.2;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #eee\">Paying attention to horizontal and vertical rhythms makes the overall structure cleaner.<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:5.33981%;top:49.83819%;width:87.37864%;height:41.58576%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-ce3c7f75-4edf-485c-81c4-cb23a8352c5b\">\n<div style=\"position:absolute;width:118.98148%;height:100%;left:-9.49074%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/horizontal-vertical-spacing.png\" alt=\"horizontal vertical spacing\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/horizontal-vertical-spacing.png 1000w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/horizontal-vertical-spacing-300x180.png 300w\" sizes=\"(min-width: 1024px) 39vh, 87vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"c77e5040-abdd-4794-9098-03ee992fda58\" auto-advance-after=\"7s\"><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#04649c\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-5f5e9f34-f904-4820-a142-7fd9d2016a79\">\n<div style=\"position:absolute;width:100%;height:100%;left:0%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png\" alt=\"grid layout background\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png 1080w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png 576w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png 169w\" sizes=\"(min-width: 1024px) 47vh, 105vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:12.13592%;top:0;width:76.21359%;height:7.60518%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6369426751592357% 0.6369426751592357% 0.6369426751592357% 0.6369426751592357% \/ 4.25531914893617% 4.25531914893617% 4.25531914893617% 4.25531914893617%\" id=\"el-aef59999-c911-4950-844d-61c06a9479db\">\n<h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11544585987261055% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.647249em;line-height:1.19;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #fff\">Grids for Mobile<\/span><\/span><\/h2>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:11.8932%;top:20.38835%;width:75.97087%;height:19.25566%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6389776357827476% 0.6389776357827476% 0.6389776357827476% 0.6389776357827476% \/ 1.680672268907563% 1.680672268907563% 1.680672268907563% 1.680672268907563%\" id=\"el-0da612c3-d975-4474-97f2-7a9c8afe5779\">\n<p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.11232028753993611% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.404531em;line-height:1.2;text-align:left;padding:0;color:#000000\"><span><span style=\"color: #eee\">When designing for mobile adopt a tile layout grid with the same column and row heights.<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:2.91262%;top:45.95469%;width:94.41748%;height:41.10032%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-9244d0f7-223a-43b1-a619-c62d348c857c\">\n<div style=\"position:absolute;width:108.82604%;height:100%;left:-4.41302%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/desktop-and-mobile-grid.png\" alt=\"desktop and mobile grid\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/desktop-and-mobile-grid.png 1000w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/desktop-and-mobile-grid-300x180.png 300w\" sizes=\"(min-width: 1024px) 42vh, 94vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"8c2554e4-c3a4-4a8d-818a-3a13b86f9b5c\" auto-advance-after=\"7s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-715dfd8e-c523-496a-940d-37daea3c4fd3\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":2000,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-c149a9a1-8897-48bd-ad24-ac391700750a\",\"keyframes\":{\"transform\":[\"scale(0.3333333333333333)\",\"scale(1)\"]},\"delay\":0,\"duration\":2000,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-b1a12df6-30db-4b83-9850-6cf2b2897e31\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":2000,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-8a287175-af73-40c0-97d3-4f31dc4baab9\",\"keyframes\":{\"transform\":[\"scale(0.3333333333333333)\",\"scale(1)\"]},\"delay\":0,\"duration\":2000,\"easing\":\"cubic-bezier(.3,0,.55,1)\",\"fill\":\"forwards\"}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\" style=\"background-color:#d1d3f1\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-1864edfd-d581-4d36-8c7e-afe16fb76fe7\">\n<div class=\"fill\" style=\"will-change:transform\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><\/p>\n<div class=\"page-fullbleed-area\">\n<div class=\"page-safe-area\">\n<div style=\"position:absolute;pointer-events:none;left:11.8932%;top:1.45631%;width:76.69903%;height:30.90615%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:0.6329113924050633% 0.6329113924050633% 0.6329113924050633% 0.6329113924050633% \/ 1.0471204188481675% 1.0471204188481675% 1.0471204188481675% 1.0471204188481675%\" id=\"el-5148b7a2-a5ec-4e7c-9437-2f88e043add1\">\n<h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.17800632911392406% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.647249em;line-height:1.2;text-align:left;padding:0;color:#000000\"><span><span style=\"font-weight: 700\">Leverage our <\/span><span style=\"font-weight: 700; color: #e44068\">Design Expertise<\/span><span style=\"font-weight: 700\"> to Give Wings to Your Ideas!<\/span><\/span><\/h2>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:0;top:47.57282%;width:100%;height:61.32686%;opacity:1\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-7da066d3-7091-4804-bcf5-85ca44fe31c9\">\n<div style=\"position:absolute;width:100.21289%;height:100%;left:-0.10644%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid.jpeg\" alt=\"\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid.jpeg 780w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-300x275.jpeg 300w\" sizes=\"(min-width: 1024px) 45vh, 100vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:11.65049%;top:35.59871%;width:58.25243%;height:12.45955%;opacity:1\">\n<div id=\"anim-b1a12df6-30db-4b83-9850-6cf2b2897e31\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-8a287175-af73-40c0-97d3-4f31dc4baab9\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.3333333333333333)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-089e603e-0e74-4d76-89dd-520afefadfb4\"><a href=\"https:\/\/300mind.studio\/contact\/?utm_source=WebStory&amp;utm_medium=button&amp;utm_campaign=GridDesign\" data-tooltip-icon=\"https:\/\/300mind.studio\/img\/common\/twitter.png\" data-tooltip-text=\"Contact 300Mind - Digital Product Design Studio\" target=\"_blank\" rel=\"noreferrer noopener\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0\"><\/p>\n<div style=\"position:absolute;width:100%;height:103.89608%;left:0%;top:-1.94804%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/Web-Button-PNG-Transparent.png\" alt=\"Web Button\" srcSet=\"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/Web-Button-PNG-Transparent.png 600w,hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/Web-Button-PNG-Transparent-300x100.png 300w\" sizes=\"(min-width: 1024px) 26vh, 58vw\" disable-inline-width=\"true\"><\/amp-img><\/div>\n<p><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"position:absolute;pointer-events:none;left:19.41748%;top:39.32039%;width:45.63107%;height:5.66343%;opacity:1\">\n<div id=\"anim-715dfd8e-c523-496a-940d-37daea3c4fd3\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\">\n<div id=\"anim-c149a9a1-8897-48bd-ad24-ac391700750a\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:scale(0.3333333333333333)\">\n<div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;border-radius:1.0638297872340425% 1.0638297872340425% 1.0638297872340425% 1.0638297872340425% \/ 5.714285714285714% 5.714285714285714% 5.714285714285714% 5.714285714285714%\" id=\"el-6afd564e-894c-4bd3-9d98-d597c02ce539\"><a href=\"https:\/\/300mind.studio\/contact\/?utm_source=WebStory&amp;utm_medium=button&amp;utm_campaign=GridDesign\" data-tooltip-icon=\"https:\/\/300mind.studio\/img\/common\/twitter.png\" data-tooltip-text=\"Contact 300Mind - Digital Product Design Studio\" target=\"_blank\" rel=\"noreferrer noopener\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0\"><\/p>\n<h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.22440159574468088% 0;font-family:&quot;Roboto&quot;,sans-serif;font-size:0.485437em;line-height:1.2;text-align:left;padding:0;color:#000000\"><span><span style=\"font-weight: 700; color: #fff\">Let&#8217;s Discuss<\/span><\/span><\/h2>\n<p><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/amp-story-grid-layer><\/amp-story-page><\/amp-story><\/body><\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Using a grid in UI UX design can make the process flow faster. Here we have covered all the crucial details about grid layout design.<\/p>\n","protected":false},"author":5,"featured_media":60,"template":"","meta":{"_acf_changed":false,"web_stories_products":[],"web_stories_publisher_logo":286,"web_stories_poster":[],"footnotes":""},"web_story_category":[14],"web_story_tag":[15,16,17,18],"class_list":["post-54","web-story","type-web-story","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Grid Layout Design - A Complete Guide - 300Mind Blog<\/title>\n<meta name=\"description\" content=\"Using a grid in UI UX design can make the process flow faster. Here we have covered all the crucial details about grid layout design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/300mind.studio\/blog\/web-stories\/grid-layout-design-best-practices\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Grid Layout Design - A Complete Guide - 300Mind Blog\" \/>\n<meta property=\"og:description\" content=\"Using a grid in UI UX design can make the process flow faster. Here we have covered all the crucial details about grid layout design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/300mind.studio\/blog\/web-stories\/grid-layout-design-best-practices\/\" \/>\n<meta property=\"og:site_name\" content=\"300Mind Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/300Mind\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-21T08:18:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-design-poster.png\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"853\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@300Mind\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/300mind.studio\/blog\/web-stories\/grid-layout-design-best-practices\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/300mind.studio\/blog\/web-stories\/grid-layout-design-best-practices\/\"},\"author\":{\"name\":\"Asha Rajput\",\"@id\":\"https:\/\/300mind.studio\/blog\/#\/schema\/person\/a865d748bafd11e60d79a52f51ff83c6\"},\"headline\":\"Grid Layout Design &#8211; A Complete Guide\",\"datePublished\":\"2022-09-07T08:35:36+00:00\",\"dateModified\":\"2024-05-21T08:18:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/300mind.studio\/blog\/web-stories\/grid-layout-design-best-practices\/\"},\"wordCount\":333,\"publisher\":{\"@id\":\"https:\/\/300mind.studio\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/300mind.studio\/blog\/web-stories\/grid-layout-design-best-practices\/\",\"url\":\"https:\/\/300mind.studio\/blog\/web-stories\/grid-layout-design-best-practices\/\",\"name\":\"Grid Layout Design - A Complete Guide - 300Mind Blog\",\"isPartOf\":{\"@id\":\"https:\/\/300mind.studio\/blog\/#website\"},\"datePublished\":\"2022-09-07T08:35:36+00:00\",\"dateModified\":\"2024-05-21T08:18:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/300mind.studio\/blog\/web-stories\/grid-layout-design-best-practices\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/300mind.studio\/blog\/web-stories\/grid-layout-design-best-practices\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/300mind.studio\/blog\/web-stories\/grid-layout-design-best-practices\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/300mind.studio\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Stories\",\"item\":\"https:\/\/300mind.studio\/blog\/web-stories\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Grid Layout Design &#8211; A Complete Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/300mind.studio\/blog\/#website\",\"url\":\"https:\/\/300mind.studio\/blog\/\",\"name\":\"300Mind\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/300mind.studio\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/300mind.studio\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/300mind.studio\/blog\/#organization\",\"name\":\"300Mind Studio\",\"url\":\"https:\/\/300mind.studio\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/300mind.studio\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/300mind-200.png\",\"contentUrl\":\"https:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/300mind-200.png\",\"width\":200,\"height\":200,\"caption\":\"300Mind Studio\"},\"image\":{\"@id\":\"https:\/\/300mind.studio\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/300Mind\",\"https:\/\/twitter.com\/300Mind\",\"https:\/\/www.instagram.com\/300mindstudio\/\",\"https:\/\/www.linkedin.com\/company\/300mind\/\",\"https:\/\/www.pinterest.com\/300Mind\/\",\"https:\/\/www.youtube.com\/@300mind\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/300mind.studio\/blog\/#\/schema\/person\/a865d748bafd11e60d79a52f51ff83c6\",\"name\":\"Asha Rajput\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/300mind.studio\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4c098678a4ee24e4727c4ca48570e380?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4c098678a4ee24e4727c4ca48570e380?s=96&d=mm&r=g\",\"caption\":\"Asha Rajput\"},\"description\":\"Asha Rajput is the founder and CEO of 300Mind, a creative Game design and development studio. Her 10+ years of experience enables her to provide game art design and development services to various clients from across the world.\",\"url\":\"https:\/\/300mind.studio\/blog\/author\/asharajput\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Grid Layout Design - A Complete Guide - 300Mind Blog","description":"Using a grid in UI UX design can make the process flow faster. Here we have covered all the crucial details about grid layout design.","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:\/\/300mind.studio\/blog\/web-stories\/grid-layout-design-best-practices\/","og_locale":"en_US","og_type":"article","og_title":"Grid Layout Design - A Complete Guide - 300Mind Blog","og_description":"Using a grid in UI UX design can make the process flow faster. Here we have covered all the crucial details about grid layout design.","og_url":"https:\/\/300mind.studio\/blog\/web-stories\/grid-layout-design-best-practices\/","og_site_name":"300Mind Blog","article_publisher":"https:\/\/www.facebook.com\/300Mind","article_modified_time":"2024-05-21T08:18:13+00:00","og_image":[{"width":640,"height":853,"url":"https:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-design-poster.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@300Mind","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/300mind.studio\/blog\/web-stories\/grid-layout-design-best-practices\/#article","isPartOf":{"@id":"https:\/\/300mind.studio\/blog\/web-stories\/grid-layout-design-best-practices\/"},"author":{"name":"Asha Rajput","@id":"https:\/\/300mind.studio\/blog\/#\/schema\/person\/a865d748bafd11e60d79a52f51ff83c6"},"headline":"Grid Layout Design &#8211; A Complete Guide","datePublished":"2022-09-07T08:35:36+00:00","dateModified":"2024-05-21T08:18:13+00:00","mainEntityOfPage":{"@id":"https:\/\/300mind.studio\/blog\/web-stories\/grid-layout-design-best-practices\/"},"wordCount":333,"publisher":{"@id":"https:\/\/300mind.studio\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/300mind.studio\/blog\/web-stories\/grid-layout-design-best-practices\/","url":"https:\/\/300mind.studio\/blog\/web-stories\/grid-layout-design-best-practices\/","name":"Grid Layout Design - A Complete Guide - 300Mind Blog","isPartOf":{"@id":"https:\/\/300mind.studio\/blog\/#website"},"datePublished":"2022-09-07T08:35:36+00:00","dateModified":"2024-05-21T08:18:13+00:00","breadcrumb":{"@id":"https:\/\/300mind.studio\/blog\/web-stories\/grid-layout-design-best-practices\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/300mind.studio\/blog\/web-stories\/grid-layout-design-best-practices\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/300mind.studio\/blog\/web-stories\/grid-layout-design-best-practices\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/300mind.studio\/blog\/"},{"@type":"ListItem","position":2,"name":"Stories","item":"https:\/\/300mind.studio\/blog\/web-stories\/"},{"@type":"ListItem","position":3,"name":"Grid Layout Design &#8211; A Complete Guide"}]},{"@type":"WebSite","@id":"https:\/\/300mind.studio\/blog\/#website","url":"https:\/\/300mind.studio\/blog\/","name":"300Mind","description":"","publisher":{"@id":"https:\/\/300mind.studio\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/300mind.studio\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/300mind.studio\/blog\/#organization","name":"300Mind Studio","url":"https:\/\/300mind.studio\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/300mind.studio\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/300mind-200.png","contentUrl":"https:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/300mind-200.png","width":200,"height":200,"caption":"300Mind Studio"},"image":{"@id":"https:\/\/300mind.studio\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/300Mind","https:\/\/twitter.com\/300Mind","https:\/\/www.instagram.com\/300mindstudio\/","https:\/\/www.linkedin.com\/company\/300mind\/","https:\/\/www.pinterest.com\/300Mind\/","https:\/\/www.youtube.com\/@300mind"]},{"@type":"Person","@id":"https:\/\/300mind.studio\/blog\/#\/schema\/person\/a865d748bafd11e60d79a52f51ff83c6","name":"Asha Rajput","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/300mind.studio\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4c098678a4ee24e4727c4ca48570e380?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4c098678a4ee24e4727c4ca48570e380?s=96&d=mm&r=g","caption":"Asha Rajput"},"description":"Asha Rajput is the founder and CEO of 300Mind, a creative Game design and development studio. Her 10+ years of experience enables her to provide game art design and development services to various clients from across the world.","url":"https:\/\/300mind.studio\/blog\/author\/asharajput\/"}]}},"story_data":{"version":47,"pages":[{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#9cece4","blurHash":"U0I8ODyDfQyDtkfQfQfQfQfQfQfQtkfQfQfQ","type":"image","mimeType":"image\/png","creationDate":1662463095000,"src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-front.png","width":1080,"height":1920,"id":15365,"alt":"grid layout front","sizes":{"medium":{"file":"grid-layout-front-169x300.png","width":169,"height":300,"filesize":8181,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-front-169x300.png"},"large":{"file":"grid-layout-front-576x1024.png","width":576,"height":1024,"filesize":4592,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-front-576x1024.png"},"thumbnail":{"file":"grid-layout-front-150x150.png","width":150,"height":150,"filesize":2255,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-front-150x150.png"},"full":{"file":"grid-layout-front.png","width":1080,"height":1920,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-front.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":0,"y":-55,"width":412,"height":732,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"97803fe6-6d60-48cb-afc3-7879b39f97ca","isBackground":true,"basedOn":"f3275456-c07c-4f18-82b3-c1bc84e0c77d"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":360,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":45,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"font-weight: 700; color: #3f8fd4\">Grid Layout Design<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":69,"y":0,"width":273,"height":107,"id":"da2b1973-b6d9-4944-ad11-684d8110f221","marginOffset":1.1531249999999957,"basedOn":"6220d162-5206-4970-946e-28364b24e1c5"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":25,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"font-weight: 700\">Best Practices to Follow<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":70,"y":119,"width":277,"height":29,"id":"781b531b-7401-4048-b003-47c7305e6b3f","basedOn":"6c89f1e8-bc6c-43a6-9585-a3c99e5a90d3","tagName":"h2"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":null,"blurHash":"UDCj#000?a%MVz%%nLM{D*x^D%fhgLt9XnWD","type":"image","mimeType":"image\/png","creationDate":"2022-09-06T12:16:21","src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-design-vector.png","width":785,"height":866,"id":15385,"alt":"grid layout design vector","sizes":{"medium":{"file":"grid-layout-design-vector-272x300.png","width":272,"height":300,"filesize":69738,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-design-vector-272x300.png"},"thumbnail":{"file":"grid-layout-design-vector-150x150.png","width":150,"height":150,"filesize":21170,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-design-vector-150x150.png"},"full":{"file":"grid-layout-design-vector.png","width":785,"height":866,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-design-vector.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false,"provider":"local"},"type":"image","x":0,"y":184,"width":412,"height":460,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"4064ce33-565f-4e8a-b781-45df0e6be81c"}],"animations":[],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"type":"page","id":"956b2a55-353a-404c-bbf2-153e8a3ff12b","defaultBackgroundElement":{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"type":"shape","id":"1864edfd-d581-4d36-8c7e-afe16fb76fe7"}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#9cece4","blurHash":"U0I8ODyDfQyDtkfQfQfQfQfQfQfQtkfQfQfQ","type":"image","mimeType":"image\/png","creationDate":1662463095000,"src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-front.png","width":1080,"height":1920,"id":15365,"alt":"grid layout front","sizes":{"medium":{"file":"grid-layout-front-169x300.png","width":169,"height":300,"filesize":8181,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-front-169x300.png"},"large":{"file":"grid-layout-front-576x1024.png","width":576,"height":1024,"filesize":4592,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-front-576x1024.png"},"thumbnail":{"file":"grid-layout-front-150x150.png","width":150,"height":150,"filesize":2255,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-front-150x150.png"},"full":{"file":"grid-layout-front.png","width":1080,"height":1920,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-front.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":0,"y":-55,"width":412,"height":732,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"a95e0b93-b494-4c65-8f29-b18c8d817965","isBackground":true,"basedOn":"97803fe6-6d60-48cb-afc3-7879b39f97ca"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":40,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.19,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #3f8fd4\">What is a Grid Layout Design?<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":50,"y":129,"width":313,"height":94,"basedOn":"feadf884-275c-4d9c-9af4-92850dbf6c00","id":"7b5accc9-b80f-4a6d-93b6-466e7fc8c822","tagName":"h2"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":25,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"The website grid is a method of arranging content on a page, as well as generating alignment and order.\n\nIt act as the skeleton or fundamental framework of user interface.","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":50,"y":276,"width":313,"height":270,"basedOn":"d17bf189-52c1-414a-a1a6-c8680a965f4e","id":"c6ec2efd-b32f-4816-aaf7-add9e50d011b","tagName":"p"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#9be9e1","blurHash":"UAJThn@XH9G^rqrWtlGuHCOtn7S~#QxCRQVs","type":"image","mimeType":"image\/jpeg","creationDate":"2022-09-06T11:32:25","src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/responsive-grid-css.jpeg","width":1710,"height":898,"id":15368,"alt":"responsive grid","sizes":{"medium":{"file":"responsive-grid-css-300x158.jpeg","width":300,"height":158,"filesize":6593,"mimeType":"image\/jpeg","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/responsive-grid-css-300x158.jpeg"},"large":{"file":"responsive-grid-css-1024x538.jpeg","width":1024,"height":538,"filesize":36015,"mimeType":"image\/jpeg","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/responsive-grid-css-1024x538.jpeg"},"thumbnail":{"file":"responsive-grid-css-150x150.jpeg","width":150,"height":150,"filesize":4857,"mimeType":"image\/jpeg","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/responsive-grid-css-150x150.jpeg"},"full":{"file":"responsive-grid-css.jpeg","width":1710,"height":898,"mimeType":"image\/jpeg","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/responsive-grid-css.jpeg"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":28,"y":-60,"width":360,"height":188,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"3fe1075c-4dae-401a-9375-a3e0c17295ef"}],"animations":[],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"type":"page","id":"813013b0-6908-4fce-9368-e8b17560eb87","defaultBackgroundElement":{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"type":"shape","id":"1864edfd-d581-4d36-8c7e-afe16fb76fe7"}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#04649c","blurHash":"U00DH:f-fQf-f,fQfQfQfQfQfQfQf,fQfQfQ","type":"image","mimeType":"image\/png","creationDate":1662465111000,"src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png","width":1080,"height":1920,"id":15376,"alt":"grid layout background","sizes":{"medium":{"file":"grid-layout-background-169x300.png","width":169,"height":300,"filesize":8252,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png"},"large":{"file":"grid-layout-background-576x1024.png","width":576,"height":1024,"filesize":4590,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png"},"thumbnail":{"file":"grid-layout-background-150x150.png","width":150,"height":150,"filesize":1572,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-150x150.png"},"full":{"file":"grid-layout-background.png","width":1080,"height":1920,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":-9,"y":-67,"width":437,"height":740,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"d3992025-b256-4998-894d-5d0eeb3b4f87","isBackground":true},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":40,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.19,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #fff\">Types of Grid Layouts<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":50,"y":8,"width":314,"height":94,"id":"feadf884-275c-4d9c-9af4-92850dbf6c00","tagName":"h2"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":25,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #eee\">There are five types of layout grids:<\/span>\n\n<span style=\"color: #eee\">1.&nbsp;Column Grid<\/span>\n<span style=\"color: #eee\">2.&nbsp;Manuscript Grid<\/span>\n<span style=\"color: #eee\">3.&nbsp;Modular Grid<\/span>\n<span style=\"color: #eee\">4.&nbsp;Hierarchical Grid<\/span>\n<span style=\"color: #eee\">5.&nbsp;Baseline Grid<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":50,"y":136,"width":313,"height":240,"id":"d17bf189-52c1-414a-a1a6-c8680a965f4e","tagName":"p"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":21.6,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"font-weight: 700; color: #fff\">Check it out in detail<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":50,"y":431,"width":209,"height":25,"basedOn":"2f8c1116-f6ef-46ed-97b2-3122196e2152","id":"45a9c0a0-d240-4e86-a8b7-7be4844ecaa8"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"type":"sticker","x":48,"y":470,"width":137,"height":73,"sticker":{"type":"fashionArrowLight"},"basedOn":"5ed25058-29df-4f56-b3a0-94d3ab333c47","id":"6b753534-adc6-47b8-bc62-85a28defbf85"}],"animations":[{"targets":["6b753534-adc6-47b8-bc62-85a28defbf85"],"id":"e09bf8fa-4ac2-4f09-a4e5-b02df1866b70","type":"effect-whoosh-in","whooshInDir":"leftToRight","duration":600,"delay":0}],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"type":"page","id":"27015668-e561-4070-974e-bc4967507366","defaultBackgroundElement":{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"type":"shape","id":"584061b2-5eca-42b1-8dfd-3c8776324fa5"}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#04649c","blurHash":"U00DH:f-fQf-f,fQfQfQfQfQfQfQf,fQfQfQ","type":"image","mimeType":"image\/png","creationDate":1662465111000,"src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png","width":1080,"height":1920,"id":15376,"alt":"grid layout background","sizes":{"medium":{"file":"grid-layout-background-169x300.png","width":169,"height":300,"filesize":8252,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png"},"large":{"file":"grid-layout-background-576x1024.png","width":576,"height":1024,"filesize":4590,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png"},"thumbnail":{"file":"grid-layout-background-150x150.png","width":150,"height":150,"filesize":1572,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-150x150.png"},"full":{"file":"grid-layout-background.png","width":1080,"height":1920,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":-9,"y":-67,"width":437,"height":740,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"1ecd179a-4cd8-48fa-8508-c97e2968ee36","isBackground":true,"basedOn":"d3992025-b256-4998-894d-5d0eeb3b4f87"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":40,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.19,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #fff\">1.&nbsp;Column Grid<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":50,"y":0,"width":314,"height":47,"id":"857880ee-97f9-4143-bfea-7fcac763ea0b","basedOn":"feadf884-275c-4d9c-9af4-92850dbf6c00","tagName":"h2"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":25,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #eee\">These are made up of columns and are used to organize multiple components.<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":50,"y":96,"width":313,"height":119,"id":"21b72ea7-4e8f-4418-b9fc-095ad2f24249","basedOn":"d17bf189-52c1-414a-a1a6-c8680a965f4e","tagName":"p"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#639bd3","blurHash":"U18i}Mo$00o#00ayyZj@00ayyZjt00ayt.j@","type":"image","mimeType":"image\/png","creationDate":"2022-06-22T12:25:48.000Z","src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/column-grid.png","width":1000,"height":562,"id":12396,"alt":"column grid","sizes":{"medium":{"file":"column-grid-300x169.png","width":300,"height":169,"filesize":2980,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/column-grid-300x169.png"},"thumbnail":{"file":"column-grid-150x150.png","width":150,"height":150,"filesize":1673,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/column-grid-150x150.png"},"full":{"file":"column-grid.png","width":1000,"height":562,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/column-grid.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":18,"y":264,"width":378,"height":276,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"17dfc197-b51f-4261-93d0-d2dc97f9c46a"}],"animations":[],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"type":"page","id":"f7f1a1c9-8948-46ca-b322-4f5111d41bfb","defaultBackgroundElement":{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"type":"shape","id":"584061b2-5eca-42b1-8dfd-3c8776324fa5"}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#04649c","blurHash":"U00DH:f-fQf-f,fQfQfQfQfQfQfQf,fQfQfQ","type":"image","mimeType":"image\/png","creationDate":1662465111000,"src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png","width":1080,"height":1920,"id":15376,"alt":"grid layout background","sizes":{"medium":{"file":"grid-layout-background-169x300.png","width":169,"height":300,"filesize":8252,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png"},"large":{"file":"grid-layout-background-576x1024.png","width":576,"height":1024,"filesize":4590,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png"},"thumbnail":{"file":"grid-layout-background-150x150.png","width":150,"height":150,"filesize":1572,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-150x150.png"},"full":{"file":"grid-layout-background.png","width":1080,"height":1920,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":-9,"y":-67,"width":437,"height":740,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"24a5a44b-3ab8-4730-9584-c2c6f48a1d50","isBackground":true,"basedOn":"1ecd179a-4cd8-48fa-8508-c97e2968ee36"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":40,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.19,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #fff\">2.&nbsp;Manuscript Grid<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":50,"y":0,"width":314,"height":94,"id":"61245be8-6955-42e5-bef8-29ed5cc276e7","basedOn":"857880ee-97f9-4143-bfea-7fcac763ea0b","tagName":"h2"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":25,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #eee\">It is always present in a Word document or a presentation template.<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":49,"y":126,"width":313,"height":90,"id":"68331257-dbf6-48b7-9a66-2d5381e8e8b3","basedOn":"21b72ea7-4e8f-4418-b9fc-095ad2f24249","tagName":"p"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#649cd3","blurHash":"U68tGckD00fl8wf6uNayD4f6ufa|KpfPnCfQ","type":"image","mimeType":"image\/png","creationDate":"2022-06-22T12:26:23.000Z","src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/manuscript-grid.png","width":1000,"height":600,"id":12397,"alt":"manuscript grid","sizes":{"medium":{"file":"manuscript-grid-300x180.png","width":300,"height":180,"filesize":4815,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/manuscript-grid-300x180.png"},"thumbnail":{"file":"manuscript-grid-150x150.png","width":150,"height":150,"filesize":3162,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/manuscript-grid-150x150.png"},"full":{"file":"manuscript-grid.png","width":1000,"height":600,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/manuscript-grid.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":13,"y":257,"width":385,"height":288,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"888925b9-d446-4393-a5fb-4f1c5e497d5b","basedOn":"17dfc197-b51f-4261-93d0-d2dc97f9c46a"}],"animations":[],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"type":"page","id":"a33124b3-6547-451b-8a00-f79d51d20d26","defaultBackgroundElement":{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"type":"shape","id":"584061b2-5eca-42b1-8dfd-3c8776324fa5"}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#04649c","blurHash":"U00DH:f-fQf-f,fQfQfQfQfQfQfQf,fQfQfQ","type":"image","mimeType":"image\/png","creationDate":1662465111000,"src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png","width":1080,"height":1920,"id":15376,"alt":"grid layout background","sizes":{"medium":{"file":"grid-layout-background-169x300.png","width":169,"height":300,"filesize":8252,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png"},"large":{"file":"grid-layout-background-576x1024.png","width":576,"height":1024,"filesize":4590,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png"},"thumbnail":{"file":"grid-layout-background-150x150.png","width":150,"height":150,"filesize":1572,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-150x150.png"},"full":{"file":"grid-layout-background.png","width":1080,"height":1920,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":-9,"y":-67,"width":437,"height":740,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"8caed9f4-2d13-4128-b5ef-8165fa09a530","isBackground":true,"basedOn":"1ecd179a-4cd8-48fa-8508-c97e2968ee36"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":40,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.19,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #fff\">3.&nbsp;Modular Grid<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":50,"y":0,"width":314,"height":47,"id":"ce0820d1-de41-4959-a792-09d39819eef3","basedOn":"857880ee-97f9-4143-bfea-7fcac763ea0b","tagName":"h2"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":25,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #eee\">It is similar to a column grid but use to organize more elements.<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":50,"y":96,"width":313,"height":90,"id":"e2db998c-65f3-4801-836e-f7463a7653d5","basedOn":"21b72ea7-4e8f-4418-b9fc-095ad2f24249","tagName":"p"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#629bd3","blurHash":"U27zGskX00bc00jtyGay4Tjttnay8wfQtnay","type":"image","mimeType":"image\/png","creationDate":"2022-06-22T12:26:49.000Z","src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/modular-grid.png","width":1000,"height":600,"id":12398,"alt":"modular grid","sizes":{"medium":{"file":"modular-grid-300x180.png","width":300,"height":180,"filesize":4037,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/modular-grid-300x180.png"},"thumbnail":{"file":"modular-grid-150x150.png","width":150,"height":150,"filesize":3240,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/modular-grid-150x150.png"},"full":{"file":"modular-grid.png","width":1000,"height":600,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/modular-grid.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":13,"y":257,"width":385,"height":288,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"0e44731f-f261-4b29-9212-432c49d19ff7","basedOn":"17dfc197-b51f-4261-93d0-d2dc97f9c46a"}],"animations":[],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"type":"page","id":"7e92eea0-245d-46b6-8bf9-182f5e80c482","defaultBackgroundElement":{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"type":"shape","id":"584061b2-5eca-42b1-8dfd-3c8776324fa5"}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#04649c","blurHash":"U00DH:f-fQf-f,fQfQfQfQfQfQfQf,fQfQfQ","type":"image","mimeType":"image\/png","creationDate":1662465111000,"src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png","width":1080,"height":1920,"id":15376,"alt":"grid layout background","sizes":{"medium":{"file":"grid-layout-background-169x300.png","width":169,"height":300,"filesize":8252,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png"},"large":{"file":"grid-layout-background-576x1024.png","width":576,"height":1024,"filesize":4590,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png"},"thumbnail":{"file":"grid-layout-background-150x150.png","width":150,"height":150,"filesize":1572,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-150x150.png"},"full":{"file":"grid-layout-background.png","width":1080,"height":1920,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":-9,"y":-67,"width":437,"height":740,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"7f7e34f6-d7af-4788-8914-6503554eefaf","isBackground":true,"basedOn":"24a5a44b-3ab8-4730-9584-c2c6f48a1d50"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":40,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.19,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #fff\">4.&nbsp;Hierarchical Grid<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":50,"y":0,"width":314,"height":94,"id":"89f6d0b7-d6f0-4eb4-9288-19d17e0a92a7","basedOn":"61245be8-6955-42e5-bef8-29ed5cc276e7","tagName":"h2"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":25,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #eee\">A freestyle grid where pieces are \u201cspontaneously\u201d arranged among the columns and rows.<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":49,"y":126,"width":313,"height":119,"id":"309904a3-0e52-437a-8413-7af4a5254ff2","basedOn":"68331257-dbf6-48b7-9a66-2d5381e8e8b3","tagName":"p"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#629bd3","blurHash":"U28GUOx^00Mx00aeyZj[4TV@yFo#4TV@yFoz","type":"image","mimeType":"image\/png","creationDate":"2022-06-22T12:27:12.000Z","src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/hierarchical-grid.png","width":1000,"height":600,"id":12399,"alt":"hierarchical grid","sizes":{"medium":{"file":"hierarchical-grid-300x180.png","width":300,"height":180,"filesize":3875,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/hierarchical-grid-300x180.png"},"thumbnail":{"file":"hierarchical-grid-150x150.png","width":150,"height":150,"filesize":2874,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/hierarchical-grid-150x150.png"},"full":{"file":"hierarchical-grid.png","width":1000,"height":600,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/hierarchical-grid.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":13,"y":277,"width":385,"height":288,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"f338182e-977e-414e-b667-f12d2c15a35c","basedOn":"888925b9-d446-4393-a5fb-4f1c5e497d5b"}],"animations":[],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"type":"page","id":"e8ed9867-e3a0-4119-8d71-a061235c82fa","defaultBackgroundElement":{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"type":"shape","id":"584061b2-5eca-42b1-8dfd-3c8776324fa5"}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#04649c","blurHash":"U00DH:f-fQf-f,fQfQfQfQfQfQfQf,fQfQfQ","type":"image","mimeType":"image\/png","creationDate":1662465111000,"src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png","width":1080,"height":1920,"id":15376,"alt":"grid layout background","sizes":{"medium":{"file":"grid-layout-background-169x300.png","width":169,"height":300,"filesize":8252,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png"},"large":{"file":"grid-layout-background-576x1024.png","width":576,"height":1024,"filesize":4590,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png"},"thumbnail":{"file":"grid-layout-background-150x150.png","width":150,"height":150,"filesize":1572,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-150x150.png"},"full":{"file":"grid-layout-background.png","width":1080,"height":1920,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":-9,"y":-67,"width":437,"height":740,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"f9336bce-3037-496e-b025-74c6ea146b44","isBackground":true,"basedOn":"8caed9f4-2d13-4128-b5ef-8165fa09a530"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":40,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.19,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #fff\">5.&nbsp;Baseline Grid<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":50,"y":0,"width":314,"height":47,"id":"9d170725-2204-4461-adae-e81c88379b40","basedOn":"ce0820d1-de41-4959-a792-09d39819eef3","tagName":"h2"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":25,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #eee\">A baseline is a line on which text is placed.<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":50,"y":96,"width":313,"height":60,"id":"b1835064-594d-4841-ae88-3167975f0428","basedOn":"e2db998c-65f3-4801-836e-f7463a7653d5","tagName":"p"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#04649c","blurHash":"U48PZt?a009a%M%LRjIV00M{~p%2RoD%xt?H","type":"image","mimeType":"image\/png","creationDate":"2022-06-22T12:27:34.000Z","src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/baseline-grid.png","width":1000,"height":562,"id":12400,"alt":"baseline grid","sizes":{"medium":{"file":"baseline-grid-300x169.png","width":300,"height":169,"filesize":11099,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/baseline-grid-300x169.png"},"thumbnail":{"file":"baseline-grid-150x150.png","width":150,"height":150,"filesize":7972,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/baseline-grid-150x150.png"},"full":{"file":"baseline-grid.png","width":1000,"height":562,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/baseline-grid.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":19,"y":259,"width":375,"height":276,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"144b6e9d-dab3-4efe-acaf-df49dd22183d","basedOn":"0e44731f-f261-4b29-9212-432c49d19ff7"}],"animations":[],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"type":"page","id":"07de4906-6b9e-4140-bc51-989f863eb748","defaultBackgroundElement":{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"type":"shape","id":"584061b2-5eca-42b1-8dfd-3c8776324fa5"}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#04649c","blurHash":"U00DH:f-fQf-f,fQfQfQfQfQfQfQf,fQfQfQ","type":"image","mimeType":"image\/png","creationDate":1662465111000,"src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png","width":1080,"height":1920,"id":15376,"alt":"grid layout background","sizes":{"medium":{"file":"grid-layout-background-169x300.png","width":169,"height":300,"filesize":8252,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png"},"large":{"file":"grid-layout-background-576x1024.png","width":576,"height":1024,"filesize":4590,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png"},"thumbnail":{"file":"grid-layout-background-150x150.png","width":150,"height":150,"filesize":1572,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-150x150.png"},"full":{"file":"grid-layout-background.png","width":1080,"height":1920,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":-9,"y":-67,"width":437,"height":740,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"8f1c9112-3df9-4808-b2be-6dce8078a3f6","isBackground":true,"basedOn":"d3992025-b256-4998-894d-5d0eeb3b4f87"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":40,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.19,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #fff\">Key Benefits of Using Grid Layout<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":50,"y":8,"width":314,"height":142,"id":"26aa4d1a-bfe8-4a64-bdf6-6ab37b06deb0","basedOn":"feadf884-275c-4d9c-9af4-92850dbf6c00","tagName":"h2"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":25,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #eee\">There are many benefits of using a grid layout:<\/span>\n\n<span style=\"color: #eee\">-&nbsp;Efficiency &amp; Consistency<\/span>\n<span style=\"color: #eee\">- Clarity and Order<\/span>\n<span style=\"color: #eee\">-&nbsp;Quicker Process<\/span>\n<span style=\"color: #eee\">-&nbsp;Easy to Modify<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":50,"y":156,"width":313,"height":209,"id":"4272b7e2-334a-47fa-be4c-076ac8116668","basedOn":"d17bf189-52c1-414a-a1a6-c8680a965f4e","tagName":"p"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":null,"blurHash":"UDCj#000?a%MVz%%nLM{D*x^D%fhgLt9XnWD","type":"image","mimeType":"image\/png","creationDate":"2022-09-06T12:16:21","src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-design-vector.png","width":785,"height":866,"id":15385,"alt":"grid layout design vector","sizes":{"medium":{"file":"grid-layout-design-vector-272x300.png","width":272,"height":300,"filesize":69738,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-design-vector-272x300.png"},"thumbnail":{"file":"grid-layout-design-vector-150x150.png","width":150,"height":150,"filesize":21170,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-design-vector-150x150.png"},"full":{"file":"grid-layout-design-vector.png","width":785,"height":866,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-design-vector.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false,"provider":"local"},"type":"image","x":176,"y":405,"width":232,"height":269,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"3fca0f76-db8d-4f15-b4e2-0be7a615c864","basedOn":"25e5a3b4-0646-4a11-8187-27462139b92b"}],"animations":[],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"type":"page","id":"a7008ebb-88ae-4c80-93de-8d79c3591c53","defaultBackgroundElement":{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"type":"shape","id":"584061b2-5eca-42b1-8dfd-3c8776324fa5"}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#04649c","blurHash":"U00DH:f-fQf-f,fQfQfQfQfQfQfQf,fQfQfQ","type":"image","mimeType":"image\/png","creationDate":1662465111000,"src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png","width":1080,"height":1920,"id":15376,"alt":"grid layout background","sizes":{"medium":{"file":"grid-layout-background-169x300.png","width":169,"height":300,"filesize":8252,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png"},"large":{"file":"grid-layout-background-576x1024.png","width":576,"height":1024,"filesize":4590,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png"},"thumbnail":{"file":"grid-layout-background-150x150.png","width":150,"height":150,"filesize":1572,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-150x150.png"},"full":{"file":"grid-layout-background.png","width":1080,"height":1920,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":-9,"y":-67,"width":437,"height":740,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"d96adbdb-85f8-4c17-b0ed-8d157c6b1c44","isBackground":true,"basedOn":"8f1c9112-3df9-4808-b2be-6dce8078a3f6"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":40,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.19,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #fff\">Best Practices of Using Grids in Design<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":50,"y":8,"width":314,"height":142,"id":"a411a13a-530a-4a32-bb66-46af8efb7855","basedOn":"26aa4d1a-bfe8-4a64-bdf6-6ab37b06deb0","tagName":"h2"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":25,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #eee\">Here are our four best practices to follow:<\/span>\n\n<span style=\"color: #eee\">-&nbsp;Select the Needed Grid<\/span>\n<span style=\"color: #eee\">-&nbsp;Keep Constraints in Mind<\/span>\n<span style=\"color: #eee\">-&nbsp;Grids for Mobile<\/span>\n<span style=\"color: #eee\">-&nbsp;Pay Attention to Vertical &amp; Horizontal Spacing<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":50,"y":176,"width":313,"height":240,"id":"c197bafe-5d59-483c-9a38-1da8c3c45515","basedOn":"4272b7e2-334a-47fa-be4c-076ac8116668","tagName":"p"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":21.6,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"font-weight: 700; color: #fff\">Check it out in detail<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":50,"y":501,"width":209,"height":25,"id":"2f8c1116-f6ef-46ed-97b2-3122196e2152"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"type":"sticker","x":48,"y":540,"width":137,"height":73,"sticker":{"type":"fashionArrowLight"},"id":"5ed25058-29df-4f56-b3a0-94d3ab333c47"}],"animations":[{"id":"ea2b2b42-321b-4d79-9295-308f4eb6daba","type":"effect-whoosh-in","whooshInDir":"leftToRight","duration":600,"delay":0,"targets":["5ed25058-29df-4f56-b3a0-94d3ab333c47"]}],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"type":"page","id":"23fed37d-28c9-475c-8ba5-4a04c5f113da","defaultBackgroundElement":{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"type":"shape","id":"584061b2-5eca-42b1-8dfd-3c8776324fa5"}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#04649c","blurHash":"U00DH:f-fQf-f,fQfQfQfQfQfQfQf,fQfQfQ","type":"image","mimeType":"image\/png","creationDate":1662465111000,"src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png","width":1080,"height":1920,"id":15376,"alt":"grid layout background","sizes":{"medium":{"file":"grid-layout-background-169x300.png","width":169,"height":300,"filesize":8252,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png"},"large":{"file":"grid-layout-background-576x1024.png","width":576,"height":1024,"filesize":4590,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png"},"thumbnail":{"file":"grid-layout-background-150x150.png","width":150,"height":150,"filesize":1572,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-150x150.png"},"full":{"file":"grid-layout-background.png","width":1080,"height":1920,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":-9,"y":-67,"width":437,"height":740,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"a7880a4d-4723-4754-a170-97ee6f1e61f8","isBackground":true,"basedOn":"24a5a44b-3ab8-4730-9584-c2c6f48a1d50"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":40,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.19,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #fff\">Select the Grid That\u2019s Needed<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":50,"y":0,"width":314,"height":94,"id":"6e89c0cc-f563-44cb-ad70-33af734d296e","basedOn":"61245be8-6955-42e5-bef8-29ed5cc276e7","tagName":"h2"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":25,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #eee\">When selecting a grid, choose one with the number of columns that your design requires.<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":49,"y":126,"width":316,"height":119,"id":"74c2e8de-61f8-419c-8a0b-380d518dc44c","basedOn":"68331257-dbf6-48b7-9a66-2d5381e8e8b3","tagName":"p"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#5ccbcb","blurHash":"U5757NkD00fl8wf6y;fQD4f6ypfQHYf7u2fQ","type":"image","mimeType":"image\/png","creationDate":"2022-06-22T12:28:24.000Z","src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/select-grid.png","width":1000,"height":600,"id":12401,"alt":"select the grid that's needed","sizes":{"medium":{"file":"select-grid-300x180.png","width":300,"height":180,"filesize":1246,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/select-grid-300x180.png"},"thumbnail":{"file":"select-grid-150x150.png","width":150,"height":150,"filesize":700,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/select-grid-150x150.png"},"full":{"file":"select-grid.png","width":1000,"height":600,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/select-grid.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":10,"y":299,"width":382,"height":249,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"df79eadf-a5c0-4332-a520-8df5950bd3b5"}],"animations":[],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"type":"page","id":"a54fcff0-4d07-42ab-a630-b4b5bfb75896","defaultBackgroundElement":{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"type":"shape","id":"584061b2-5eca-42b1-8dfd-3c8776324fa5"}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#04649c","blurHash":"U00DH:f-fQf-f,fQfQfQfQfQfQfQf,fQfQfQ","type":"image","mimeType":"image\/png","creationDate":1662465111000,"src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png","width":1080,"height":1920,"id":15376,"alt":"grid layout background","sizes":{"medium":{"file":"grid-layout-background-169x300.png","width":169,"height":300,"filesize":8252,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png"},"large":{"file":"grid-layout-background-576x1024.png","width":576,"height":1024,"filesize":4590,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png"},"thumbnail":{"file":"grid-layout-background-150x150.png","width":150,"height":150,"filesize":1572,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-150x150.png"},"full":{"file":"grid-layout-background.png","width":1080,"height":1920,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":-9,"y":-67,"width":437,"height":740,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"e92470d0-4925-4540-968d-b943e7ddc781","isBackground":true,"basedOn":"a7880a4d-4723-4754-a170-97ee6f1e61f8"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":40,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.19,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #fff\">Keep Constraints in Mind<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":50,"y":0,"width":314,"height":94,"id":"7a0c0cc0-5371-4a27-86be-2674a8889f7d","basedOn":"6e89c0cc-f563-44cb-ad70-33af734d296e","tagName":"h2"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":25,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #eee\">Keeping constraints in mind helps you to concentrate on what is truly essential to your users.<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":49,"y":126,"width":313,"height":119,"id":"b8b9980d-8e06-4094-a292-182171efa426","basedOn":"74c2e8de-61f8-419c-8a0b-380d518dc44c","tagName":"p"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#09679f","blurHash":"U66-Wnoz4Ta$D4kCy;fkHXj[yWkBMcbHtSkB","type":"image","mimeType":"image\/png","creationDate":"2022-06-22T12:28:57.000Z","src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/constraints.png","width":1000,"height":562,"id":12402,"alt":"keep constraints in mind","sizes":{"medium":{"file":"constraints-300x169.png","width":300,"height":169,"filesize":3978,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/constraints-300x169.png"},"thumbnail":{"file":"constraints-150x150.png","width":150,"height":150,"filesize":2819,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/constraints-150x150.png"},"full":{"file":"constraints.png","width":1000,"height":562,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/constraints.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":26,"y":310,"width":358,"height":265,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"9d2d1ba3-ea9d-41f8-a680-2764d34bf04a","basedOn":"c27aff48-83fa-4eb4-ab38-22ac73a66e51"}],"animations":[],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"type":"page","id":"5fa8b49f-b7c7-4c91-9fd5-db09bd5d0f07","defaultBackgroundElement":{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"type":"shape","id":"584061b2-5eca-42b1-8dfd-3c8776324fa5"}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#04649c","blurHash":"U00DH:f-fQf-f,fQfQfQfQfQfQfQf,fQfQfQ","type":"image","mimeType":"image\/png","creationDate":1662465111000,"src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png","width":1080,"height":1920,"id":15376,"alt":"grid layout background","sizes":{"medium":{"file":"grid-layout-background-169x300.png","width":169,"height":300,"filesize":8252,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png"},"large":{"file":"grid-layout-background-576x1024.png","width":576,"height":1024,"filesize":4590,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png"},"thumbnail":{"file":"grid-layout-background-150x150.png","width":150,"height":150,"filesize":1572,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-150x150.png"},"full":{"file":"grid-layout-background.png","width":1080,"height":1920,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":-9,"y":-67,"width":437,"height":740,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"9b242fae-2b39-455c-9846-84639254e2ba","isBackground":true,"basedOn":"e92470d0-4925-4540-968d-b943e7ddc781"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":40,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.19,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #fff\">Pay Attention to Spacing<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":50,"y":0,"width":314,"height":94,"id":"300680db-e35b-4c12-85ac-ca19eac185dc","basedOn":"7a0c0cc0-5371-4a27-86be-2674a8889f7d","tagName":"h2"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":25,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #eee\">Paying attention to horizontal and vertical rhythms makes the overall structure cleaner.<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":49,"y":126,"width":313,"height":119,"id":"980d3f33-d639-4b80-9202-d86e8b6a989a","basedOn":"b8b9980d-8e06-4094-a292-182171efa426","tagName":"p"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#629bd2","blurHash":"U18se:=h00G@00+dyFBN00+etmBh4T#=o~Kg","type":"image","mimeType":"image\/png","creationDate":"2022-06-22T12:29:38.000Z","src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/horizontal-vertical-spacing.png","width":1000,"height":600,"id":12403,"alt":"horizontal vertical spacing","sizes":{"medium":{"file":"horizontal-vertical-spacing-300x180.png","width":300,"height":180,"filesize":1896,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/horizontal-vertical-spacing-300x180.png"},"thumbnail":{"file":"horizontal-vertical-spacing-150x150.png","width":150,"height":150,"filesize":1517,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/horizontal-vertical-spacing-150x150.png"},"full":{"file":"horizontal-vertical-spacing.png","width":1000,"height":600,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/horizontal-vertical-spacing.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":22,"y":308,"width":360,"height":257,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"ce3c7f75-4edf-485c-81c4-cb23a8352c5b","basedOn":"9d2d1ba3-ea9d-41f8-a680-2764d34bf04a"}],"animations":[],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"type":"page","id":"e897161a-f4c7-469b-86b6-35aeb3a0e2db","defaultBackgroundElement":{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"type":"shape","id":"584061b2-5eca-42b1-8dfd-3c8776324fa5"}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#04649c","blurHash":"U00DH:f-fQf-f,fQfQfQfQfQfQfQf,fQfQfQ","type":"image","mimeType":"image\/png","creationDate":1662465111000,"src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png","width":1080,"height":1920,"id":15376,"alt":"grid layout background","sizes":{"medium":{"file":"grid-layout-background-169x300.png","width":169,"height":300,"filesize":8252,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-169x300.png"},"large":{"file":"grid-layout-background-576x1024.png","width":576,"height":1024,"filesize":4590,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-576x1024.png"},"thumbnail":{"file":"grid-layout-background-150x150.png","width":150,"height":150,"filesize":1572,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background-150x150.png"},"full":{"file":"grid-layout-background.png","width":1080,"height":1920,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-layout-background.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":-9,"y":-67,"width":437,"height":740,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"5f5e9f34-f904-4820-a142-7fd9d2016a79","isBackground":true,"basedOn":"9b242fae-2b39-455c-9846-84639254e2ba"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":40,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.19,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #fff\">Grids for Mobile<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":50,"y":0,"width":314,"height":47,"id":"aef59999-c911-4950-844d-61c06a9479db","basedOn":"300680db-e35b-4c12-85ac-ca19eac185dc","tagName":"h2"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":25,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"color: #eee\">When designing for mobile adopt a tile layout grid with the same column and row heights.<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":49,"y":126,"width":313,"height":119,"id":"0da612c3-d975-4474-97f2-7a9c8afe5779","basedOn":"980d3f33-d639-4b80-9202-d86e8b6a989a","tagName":"p"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#5fb7ce","blurHash":"U29m|+y;D4HZ4TXNogXO00U#p@cn8wXgj0af","type":"image","mimeType":"image\/png","creationDate":"2022-06-22T12:30:10.000Z","src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/desktop-and-mobile-grid.png","width":1000,"height":600,"id":12404,"alt":"desktop and mobile grid","sizes":{"medium":{"file":"desktop-and-mobile-grid-300x180.png","width":300,"height":180,"filesize":1881,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/desktop-and-mobile-grid-300x180.png"},"thumbnail":{"file":"desktop-and-mobile-grid-150x150.png","width":150,"height":150,"filesize":1090,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/desktop-and-mobile-grid-150x150.png"},"full":{"file":"desktop-and-mobile-grid.png","width":1000,"height":600,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/desktop-and-mobile-grid.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":12,"y":284,"width":389,"height":254,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"9244d0f7-223a-43b1-a619-c62d348c857c"}],"animations":[],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"type":"page","id":"c77e5040-abdd-4794-9098-03ee992fda58","defaultBackgroundElement":{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"type":"shape","id":"584061b2-5eca-42b1-8dfd-3c8776324fa5"}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"type":"shape","id":"1864edfd-d581-4d36-8c7e-afe16fb76fe7"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":40,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"font-weight: 700\">Leverage our <\/span><span style=\"font-weight: 700; color: #e44068\">Design Expertise<\/span><span style=\"font-weight: 700\"> to Give Wings to Your Ideas!<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":49,"y":9,"width":316,"height":191,"id":"5148b7a2-a5ec-4e7c-9437-2f88e043add1","basedOn":"781b531b-7401-4048-b003-47c7305e6b3f","tagName":"h2"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#d3cff2","blurHash":"UNN,M?M#-hxsCTslWVM}?XXSS6obQmovkDo}","type":"image","mimeType":"image\/jpeg","creationDate":"2022-09-06T11:45:40","src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid.jpeg","width":780,"height":716,"id":15370,"alt":"","sizes":{"medium":{"file":"grid-300x275.jpeg","width":300,"height":275,"filesize":15559,"mimeType":"image\/jpeg","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-300x275.jpeg"},"thumbnail":{"file":"grid-150x150.jpeg","width":150,"height":150,"filesize":6069,"mimeType":"image\/jpeg","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-150x150.jpeg"},"full":{"file":"grid.jpeg","width":780,"height":716,"mimeType":"image\/jpeg","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid.jpeg"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":0,"y":294,"width":412,"height":379,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"7da066d3-7091-4804-bcf5-85ca44fe31c9"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"baseColor":"#047fc7","blurHash":"UD1s2{fljDfkhLfkaefkl:fPf5fPdofQfRfQ","type":"image","mimeType":"image\/png","creationDate":1662539071000,"src":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/Web-Button-PNG-Transparent.png","width":600,"height":200,"id":15452,"alt":"Web Button","sizes":{"medium":{"file":"Web-Button-PNG-Transparent-300x100.png","width":300,"height":100,"filesize":1608,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/Web-Button-PNG-Transparent-300x100.png"},"thumbnail":{"file":"Web-Button-PNG-Transparent-150x150.png","width":150,"height":150,"filesize":2540,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/Web-Button-PNG-Transparent-150x150.png"},"full":{"file":"Web-Button-PNG-Transparent.png","width":600,"height":200,"mimeType":"image\/png","sourceUrl":"hhttps:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/Web-Button-PNG-Transparent.png"}},"isPlaceholder":false,"isOptimized":false,"isMuted":false,"isExternal":false,"needsProxy":false},"type":"image","x":48,"y":220,"width":240,"height":77,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"089e603e-0e74-4d76-89dd-520afefadfb4","link":{"needsProxy":false,"url":"https:\/\/300mind.studio\/contact\/?utm_source=WebStory&utm_medium=button&utm_campaign=GridDesign","rel":[],"icon":"https:\/\/300mind.studio\/img\/common\/twitter.png","desc":"Contact 300Mind - Digital Product Design Studio"}},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Roboto"},"fontSize":30,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.2,"textAlign":"left","padding":{"locked":true,"hasHiddenPadding":false,"horizontal":0,"vertical":0},"type":"text","content":"<span style=\"font-weight: 700; color: #fff\">Let's Discuss<\/span>","borderRadius":{"locked":true,"topLeft":2,"topRight":2,"bottomRight":2,"bottomLeft":2},"x":80,"y":243,"width":188,"height":35,"id":"6afd564e-894c-4bd3-9d98-d597c02ce539","link":{"needsProxy":false,"url":"https:\/\/300mind.studio\/contact\/?utm_source=WebStory&utm_medium=button&utm_campaign=GridDesign","rel":[],"icon":"https:\/\/300mind.studio\/img\/common\/twitter.png","desc":"Contact 300Mind - Digital Product Design Studio"}}],"animations":[{"id":"d9cd495c-e0f8-406d-bbf7-9ddba5dfbf4b","type":"effect-zoom","scaleDirection":"scaleIn","duration":2000,"delay":0,"targets":["6afd564e-894c-4bd3-9d98-d597c02ce539"]},{"id":"7ef307cd-3b14-4608-8bad-c1b5cc19c2e8","type":"effect-zoom","scaleDirection":"scaleIn","duration":2000,"delay":0,"targets":["089e603e-0e74-4d76-89dd-520afefadfb4"]}],"backgroundColor":{"color":{"r":209,"g":211,"b":241}},"type":"page","id":"8c2554e4-c3a4-4a8d-818a-3a13b86f9b5c","defaultBackgroundElement":{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"isDefaultBackground":true,"type":"shape","id":"1864edfd-d581-4d36-8c7e-afe16fb76fe7"},"pageAttachment":{"url":"","icon":"","needsProxy":false,"ctaText":"Read More"}}],"fonts":{"Roboto":{"family":"Roboto","fallbacks":["sans-serif"],"weights":[100,300,400,500,700,900],"styles":["italic","regular"],"variants":[[0,100],[1,100],[0,300],[1,300],[0,400],[1,400],[0,500],[1,500],[0,700],[1,700],[0,900],[1,900]],"service":"fonts.google.com","metrics":{"upm":2048,"asc":1900,"des":-500,"tAsc":1536,"tDes":-512,"tLGap":102,"wAsc":1946,"wDes":512,"xH":1082,"capH":1456,"yMin":-555,"yMax":2163,"hAsc":1900,"hDes":-500,"lGap":0}}},"autoAdvance":true,"defaultPageDuration":7,"currentStoryStyles":{"colors":[]}},"story_poster":{"id":60,"url":"https:\/\/300mind.studio\/blog\/wp-content\/uploads\/2023\/07\/grid-design-poster.png","width":640,"height":853,"needsProxy":false},"_links":{"self":[{"href":"https:\/\/300mind.studio\/blog\/wp-json\/web-stories\/v1\/web-story\/54","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/300mind.studio\/blog\/wp-json\/web-stories\/v1\/web-story"}],"about":[{"href":"https:\/\/300mind.studio\/blog\/wp-json\/wp\/v2\/types\/web-story"}],"author":[{"embeddable":true,"href":"https:\/\/300mind.studio\/blog\/wp-json\/web-stories\/v1\/users\/5"}],"version-history":[{"count":4,"href":"https:\/\/300mind.studio\/blog\/wp-json\/web-stories\/v1\/web-story\/54\/revisions"}],"predecessor-version":[{"id":2492,"href":"https:\/\/300mind.studio\/blog\/wp-json\/web-stories\/v1\/web-story\/54\/revisions\/2492"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/300mind.studio\/blog\/wp-json\/web-stories\/v1\/media\/60"}],"wp:attachment":[{"href":"https:\/\/300mind.studio\/blog\/wp-json\/web-stories\/v1\/media?parent=54"}],"wp:term":[{"taxonomy":"web_story_category","embeddable":true,"href":"https:\/\/300mind.studio\/blog\/wp-json\/web-stories\/v1\/web_story_category?post=54"},{"taxonomy":"web_story_tag","embeddable":true,"href":"https:\/\/300mind.studio\/blog\/wp-json\/web-stories\/v1\/web_story_tag?post=54"}],"wp:lock":[{"embeddable":true,"href":"https:\/\/300mind.studio\/blog\/wp-json\/web-stories\/v1\/web-story\/54\/lock"}],"wp:publisherlogo":[{"embeddable":true,"href":"https:\/\/300mind.studio\/blog\/wp-json\/web-stories\/v1\/media\/286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}