{"id":15364,"date":"2017-04-03T08:00:50","date_gmt":"2017-04-03T15:00:50","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=15364"},"modified":"2026-05-08T02:19:03","modified_gmt":"2026-05-08T09:19:03","slug":"dont-bust-layout-grid","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/tutorials\/dont-bust-layout-grid\/","title":{"rendered":"Do Your Future Self a Favor: Don\u2019t Bust the Grid"},"content":{"rendered":"<p>Layout grids help designers define and structure elements in a composition. Sticking to them is critical to success in any design system because elements and blocks should stay modular. You never know in what context the future &#8220;you&#8221; will want to use something.<\/p>\n<p>Context is key. Should a hero element go on the left or on the right? Should it fill four width-units or six? Knowing its size determines how you can arrange everything, LEGO-like, in a composition \u2014 and more importantly, what <em>can<\/em> go adjancent to what.<\/p>\n<h2>Prototyping a design system grid<\/h2>\n<p>From prototyping apps to CSS frameworks, some design tools let you establish a standard grid to keep your components&#8217; dimensions interchangeable. For example, UXPin has a customizable horizontal layout grid that&#8217;s analogous to those found in <a href=\"http:\/\/getbootstrap.com\/\">Bootstrap<\/a> and <a href=\"http:\/\/foundation.zurb.com\/\">Foundation<\/a>. If you&#8217;re looking to take your prototypes further and actually build functional apps without code, <a href=\"https:\/\/www.adalo.com\" target=\"_blank\" rel=\"noopener noreferrer\">Adalo<\/a> is a no-code app builder that pairs AI-powered generation with a visual canvas, letting you design database-driven apps for iOS, Android, and web using the same modular, grid-based thinking. Here&#8217;s how UXPin&#8217;s grid works.<\/p>\n<h2>Editing the grid<\/h2>\n<p>With no elements selected, UXPin gives you canvas options on the right side of the Editor. Click &#8220;Edit Grid&#8221; to do what it sounds like. Options include:<\/p>\n<ul>\n<li>Number of columns<\/li>\n<li>Gutter width<\/li>\n<li>Side margins&#8217; widths<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/customize-the-grid.gif\" alt=\"Customizing the grid\" width=\"600\" height=\"337\" class=\"alignnone size-full wp-image-15365\" \/><\/p>\n<p>You can also type option-G (Mac) or alt-G (Windows) to toggle the horizontal grid on and off. When the grid is on, elements will snap to the visible columns. Turning the grid off disables this snapping feature \u2014 although elements will still align to the canvas and each other.<\/p>\n<h2>What about the canvas?<\/h2>\n<p>A design system&#8217;s canvas is just as important as its layout grid. To change the canvas&#8217;s width and height in UXPin, look for &#8220;Size&#8221; above the grid button. You can choose from a preset size or enter your own pixel dimensions.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/canvas-properties.png\" alt=\"Customizing the canvas\" width=\"700\" height=\"415\" class=\"alignnone size-full wp-image-15366\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/canvas-properties.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/canvas-properties-506x300.png 506w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<h2>Using grids in your work<\/h2>\n<p>Grids are a fundamental part of your style guide or design system. They inform components&#8217; dimensions (or, if the grid is flexible, their limits) which makes them modular. That is, you grid-based elements ensure you can easily rearrange them in a page or view. <\/p>\n<p>When thinking in terms of flexible building blocks rather than static templates, your designs can adapt to circumstances beyond their original context \u2014 <em>I&#8217;m looking at you, as-yet-undreamed-of-next-version.<\/em><\/p>\n<p>Grab a <a href=\"https:\/\/www.uxpin.com\/\">free UXPin trial<\/a> to build prototypes that snap to a sensible grid.<\/p>\n<section class=\"uxpin-trial-widget\">\n<h2>Join the world&#8217;s best designers who&nbsp;use UXPin.<\/h2>\n<p><span class=\"white-info\">Sign up for a free trial.<\/span><a href=\"https:\/\/www.uxpin.com\/sign-up\" class=\"btn btn-flat sign-up-btn white\">Try it for free!<\/a><\/section>\n","protected":false},"excerpt":{"rendered":"<p>Although UXPin doesn\u2019t export code, it has a customizable grid that\u2019s analogous to those found in popular CSS frameworks. Here\u2019s how it works.<\/p>\n","protected":false},"author":27,"featured_media":15367,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,199,11,19],"tags":[],"class_list":["post-15364","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-design-systems","category-tutorials","category-uxpin"],"yoast_title":"","yoast_metadesc":"Although UXPin doesn\u2019t export code, it has a customizable grid that\u2019s analogous to those found in popular CSS frameworks. Here\u2019s how it works.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Do Your Future Self a Favor: Don\u2019t Bust the Grid | UXPin<\/title>\n<meta name=\"description\" content=\"Although UXPin doesn\u2019t export code, it has a customizable grid that\u2019s analogous to those found in popular CSS frameworks. Here\u2019s how it works.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/tutorials\/dont-bust-layout-grid\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Do Your Future Self a Favor: Don\u2019t Bust the Grid\" \/>\n<meta property=\"og:description\" content=\"Although UXPin doesn\u2019t export code, it has a customizable grid that\u2019s analogous to those found in popular CSS frameworks. Here\u2019s how it works.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/tutorials\/dont-bust-layout-grid\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-03T15:00:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-08T09:19:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/layout-grid-teaser.png\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ben Gremillion\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@benthinkin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ben Gremillion\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/dont-bust-layout-grid\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/dont-bust-layout-grid\\\/\"},\"author\":{\"name\":\"Ben Gremillion\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"headline\":\"Do Your Future Self a Favor: Don\u2019t Bust the Grid\",\"datePublished\":\"2017-04-03T15:00:50+00:00\",\"dateModified\":\"2026-05-08T09:19:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/dont-bust-layout-grid\\\/\"},\"wordCount\":440,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/dont-bust-layout-grid\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/layout-grid-teaser.png\",\"articleSection\":[\"Blog\",\"Design Systems\",\"Tutorials\",\"UXPin\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/dont-bust-layout-grid\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/dont-bust-layout-grid\\\/\",\"name\":\"Do Your Future Self a Favor: Don\u2019t Bust the Grid | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/dont-bust-layout-grid\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/dont-bust-layout-grid\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/layout-grid-teaser.png\",\"datePublished\":\"2017-04-03T15:00:50+00:00\",\"dateModified\":\"2026-05-08T09:19:03+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"description\":\"Although UXPin doesn\u2019t export code, it has a customizable grid that\u2019s analogous to those found in popular CSS frameworks. Here\u2019s how it works.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/dont-bust-layout-grid\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/dont-bust-layout-grid\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/dont-bust-layout-grid\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/layout-grid-teaser.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/layout-grid-teaser.png\",\"width\":720,\"height\":200,\"caption\":\"layout grid teaser\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/dont-bust-layout-grid\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Do Your Future Self a Favor: Don\u2019t Bust the Grid\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\",\"name\":\"Ben Gremillion\",\"description\":\"Ben Gremillion is a Content Strategist at UXPin. He\u2019s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.\",\"sameAs\":[\"https:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/benthinkin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/bengremillion\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Do Your Future Self a Favor: Don\u2019t Bust the Grid | UXPin","description":"Although UXPin doesn\u2019t export code, it has a customizable grid that\u2019s analogous to those found in popular CSS frameworks. Here\u2019s how it works.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/tutorials\/dont-bust-layout-grid\/","og_locale":"en_US","og_type":"article","og_title":"Do Your Future Self a Favor: Don\u2019t Bust the Grid","og_description":"Although UXPin doesn\u2019t export code, it has a customizable grid that\u2019s analogous to those found in popular CSS frameworks. Here\u2019s how it works.","og_url":"https:\/\/www.uxpin.com\/studio\/tutorials\/dont-bust-layout-grid\/","og_site_name":"Studio by UXPin","article_published_time":"2017-04-03T15:00:50+00:00","article_modified_time":"2026-05-08T09:19:03+00:00","og_image":[{"width":720,"height":200,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/layout-grid-teaser.png","type":"image\/png"}],"author":"Ben Gremillion","twitter_card":"summary_large_image","twitter_creator":"@benthinkin","twitter_misc":{"Written by":"Ben Gremillion","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/tutorials\/dont-bust-layout-grid\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/tutorials\/dont-bust-layout-grid\/"},"author":{"name":"Ben Gremillion","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"headline":"Do Your Future Self a Favor: Don\u2019t Bust the Grid","datePublished":"2017-04-03T15:00:50+00:00","dateModified":"2026-05-08T09:19:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/tutorials\/dont-bust-layout-grid\/"},"wordCount":440,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/tutorials\/dont-bust-layout-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/layout-grid-teaser.png","articleSection":["Blog","Design Systems","Tutorials","UXPin"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/tutorials\/dont-bust-layout-grid\/","url":"https:\/\/www.uxpin.com\/studio\/tutorials\/dont-bust-layout-grid\/","name":"Do Your Future Self a Favor: Don\u2019t Bust the Grid | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/tutorials\/dont-bust-layout-grid\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/tutorials\/dont-bust-layout-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/layout-grid-teaser.png","datePublished":"2017-04-03T15:00:50+00:00","dateModified":"2026-05-08T09:19:03+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"description":"Although UXPin doesn\u2019t export code, it has a customizable grid that\u2019s analogous to those found in popular CSS frameworks. Here\u2019s how it works.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/tutorials\/dont-bust-layout-grid\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/tutorials\/dont-bust-layout-grid\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/tutorials\/dont-bust-layout-grid\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/layout-grid-teaser.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/layout-grid-teaser.png","width":720,"height":200,"caption":"layout grid teaser"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/tutorials\/dont-bust-layout-grid\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Do Your Future Self a Favor: Don\u2019t Bust the Grid"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f","name":"Ben Gremillion","description":"Ben Gremillion is a Content Strategist at UXPin. He\u2019s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.","sameAs":["https:\/\/www.uxpin.com","https:\/\/x.com\/benthinkin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/bengremillion\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=15364"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15364\/revisions"}],"predecessor-version":[{"id":59149,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15364\/revisions\/59149"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/15367"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=15364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=15364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=15364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}