{"id":5312,"date":"2017-09-15T14:29:54","date_gmt":"2017-09-15T14:29:54","guid":{"rendered":"https:\/\/cheesecakelabs.com\/blog\/?p=5312\/"},"modified":"2026-08-15T01:41:53","modified_gmt":"2026-08-15T01:41:53","slug":"dear-designers-love-developers-learned-display-grid","status":"publish","type":"post","link":"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/","title":{"rendered":"Dear designers, love your developers because they’ve learned display grid \u2013 and you’ve done it too"},"content":{"rendered":"

Depending on your journey as a designer<\/a>, you may be used to the freedom that graphic media allows: to create overlaps\/overlays or to elaborate compositions and grids that fill all the paper with pretty organized photos and texts. However, why is it so hard to build a web page with this same freedom? Fortunately, the capacity to build these layouts has been improving and what\u2019s best: it is so simple that you can start using it right now!<\/span><\/i><\/p>\n

<\/p>\n

How does web layout work?<\/strong><\/h2>\n

Layout on the web works under constraints that print never had. All the options mentioned above make sense when applied to static media where all copies will be the same, for example, books and magazines. But on the web, things usually work differently: there are infinite device sizes, and pages need to load quickly while being accessible for screen readers. You also need the developer’s ability to build everything that was drawn in Sketch or Photoshop, using the minimum possible amount of code so it can be reusable as much as possible.<\/span><\/p>\n

Having this structure in mind, it is easy to mentally picture the largely adopted 12\/16-column grid in order to build responsive websites and define the transition from desktop to smartphone browsers. However, there are still big limitations (such as the fact that the HTML order directly interferes with the content visualization), resulting in a big and complex amount of code. <\/span>There are some CSS frameworks that try to solve the grid problem. The most famous are Bootstrap<\/a>, Foundation<\/a>, Flexbox Grid<\/a>, and Lost Grid<\/a>. But let\u2019s see the written code in these frameworks:<\/span><\/p>\n

<div class=\"row\">\n <div class=\"col-xs-6\">.col-xs-6<\/div>\n <div class=\"col-xs-6\">.col-xs-6<\/div>\n<\/div>\n<div class=\"row\">\n <div class=\"col-xs-8\">.col-xs-8<\/div>\n <div class=\"col-xs-4\">.col-xs-4<\/div>\n<\/div>\n<div class=\"row\">\n <div class=\"col-xs-4\">.col-xs-4<\/div>\n <div class=\"col-xs-4\">.col-xs-4<\/div>\n <div class=\"col-xs-4\">.col-xs-4<\/div>\n<\/div>\n<\/code><\/pre>\n
In addition to having to import a considerable amount of code, these structures are usually unreadable, and in practice there are always some exceptions that the framework can\u2019t solve. This was a battle won by pure CSS.<\/span><\/p>\n
What is display grid in CSS?<\/strong><\/h2>\n
The display grid is a new specification<\/a> from CSS that drastically reduces the complexity of building web layouts and structures. Now we can divide the page into areas that can be flexible or fixed, which can then be filled with content.<\/span><\/p>\n
Let’s create a 12-column grid and try to understand what has changed:<\/span><\/p>\n
#container {<\/span>\n  \/* 1: Set the width *\/<\/span>\n  width: 960px;<\/span>\n\n  \/* Invoke the grid *\/<\/span>\n  display: grid; <\/span>\n\n  \/* 2: Define the columns, in this case 12 columns with liquid width *\/<\/span>\n  grid-template-columns: repeat(12, 1fr);<\/span>\n\n  \/* Define 8 rows with 110px of height *\/<\/span>\n  grid-template-rows: repeat(8, 110px);<\/span>\n\n  \/* 3: And the gap width 10px *\/<\/span>\n  grid-gap: 10px;<\/span>\n}\n<\/span><\/code><\/pre>\n
\"\"
12-column grid in Display grid and you can see the full code here<\/a><\/figcaption><\/figure>\n
Using only this <\/span>amount of code<\/b>, the elements will already fit inside the grid and will never break or exceed the configured width \u2013 a problem that existed in CSS frameworks. And we can still easily get all these values from Sketch.<\/span><\/p>\n
And the elements from the page are described like this:<\/span><\/p>\n
.box {<\/span>\n  \/* Occupy the third to the eleventh column row *\/<\/span>\n  grid-column: 3\/11;<\/span>\n\n  \/* And occupy the region from 1 to 2 line *\/<\/span>\n  grid-row: 1\/2;<\/span>\n}<\/span><\/code><\/pre>\n
How do you set up the layout grid in Sketch?<\/strong><\/h2>\n
First, you need to allow the layout view in Sketch by using the command “Option + L”, and then you just need to configure it in View > Canvas > Layout Settings. As you can see, we use the same values for both CSS and Sketch.<\/span><\/p>\n
\"Sketch<\/p>\n
Incredibly simple and beautiful \ud83d\ude42<\/span><\/p>\n
Responsive layout is now fun<\/strong> <\/span><\/h2>\n
Let’s create a classic website as an example, using a header, sidebar, article, and footer. Then, we will introduce the concept of grid-area within the specification of the display grid.
\n<\/span><\/p>\n
Again, we need to define the columns and rows of the layout, and then we start naming the sections of the page with the grid-area property, so you can describe<\/b> what the layout format will be, like this:<\/span><\/p>\n
.container {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: 100px 400px 100px 100px;\n grid-gap: 10px;\n \n grid-template-areas: 'header header header'\n                      'sidebar article article'\n                      'sidebar footer footer';\n}\n\n.header { grid-area: header }\n.sidebar { grid-area: sidebar }\n.article { grid-area: article }\n.footer { grid-area: footer }<\/code><\/pre>\n
\"\"
Classic desktop website, but in display grid and you can see the full code here<\/a><\/figcaption><\/figure>\n
And to change the layout on mobile, you just have to set up the layout, like this:<\/span><\/p>\n
@media screen and (max-width: 768px) {<\/span>\n  .container {<\/span>\n    grid-template-areas: 'header header header'<\/span>\n                         'article article article'<\/span>\n                         'sidebar sidebar sidebar'<\/span>\n                         'footer footer footer';<\/span>\n  }<\/span>\n}<\/span><\/code><\/pre>\n
\"\"
Classic mobile website,  you can see the full code here<\/a><\/figcaption><\/figure>\n
As you can see, the order or position of the HTML doesn’t matter, because what really matters is how we set the layout position in CSS.<\/p>\n
What will change in my layout?<\/strong><\/h2>\n
You will be able to create more dynamic responsive layouts, with more distinction between desktop and mobile, using elements that previously could not change positions because of their relation with HTML. Now the elements can be free to occupy areas of the layout that were unreachable before, without repeating code and content (which is bad for SEO and maintenance) and without demanding great effort.<\/span><\/p>\n
To make the changes clearer, imagine a desktop layout that looks like this:<\/span><\/p>\n
\"\"<\/p>\n
On the mobile it can look like this:<\/span><\/p>\n
\"\"<\/p>\n
Can you see the new possibilities?<\/span><\/p>\n
Think outside the grid<\/strong><\/h2>\n
There are many possibilities that “display grid” has created, without creating complexity, unreadable code, and upset developers. To see more about these possibilities, I recommend the website Grid by Example<\/a>,<\/span> which shows the power of this new specification and helps to demonstrate what we can accomplish.<\/span><\/p>\n
And that changes everything again: since the web\u2019s early days, there have been a lot of attempts to write some practical and reusable specifications to build web layouts, from terrible tables to floats and now flexbox and grid. Today, the web takes important steps towards friendly code and possibilities that don\u2019t limit designers\u2019 and developers\u2019 creativity.<\/span><\/p>\n
 <\/p>\n
References<\/b><\/p>\n
https:\/\/gridbyexample.com\/examples\/<\/span><\/a><\/p>\n
http:\/\/maketea.co.uk\/2016\/09\/28\/css-grid-layout-is-a-step-change.html<\/span><\/a><\/p>\n
http:\/\/fantasai.inkedblade.net\/weblog\/2012\/css-layout-evolution\/<\/span><\/a><\/p>\n
https:\/\/rachelandrew.co.uk\/archives\/2015\/02\/04\/css-grid-layout-creating-complex-grids\/<\/span><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Depending on your journey as a designer, you may be used to the freedom that graphic media allows: to create overlaps\/overlays or to elaborate compositions and grids that fill all the paper with pretty organized photos and texts. However, why is it so hard to build a web page with this same freedom? Fortunately, the […]<\/p>\n","protected":false},"author":65,"featured_media":5403,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_focuskw":"designer","_yoast_wpseo_title":"Dear Designers: CSS Display Grid Makes Layout Simple","_yoast_wpseo_metadesc":"Build responsive web layouts with far less code: how CSS display grid works, how to match the same grid values in Sketch, and how to start using it today.","_yoast_wpseo_meta-robots-noindex":"","_yoast_wpseo_canonical":"","footnotes":"","ckl_wpml_lang":"","ckl_wpml_source_id":0,"ckl_wpml_status":""},"categories":[1425,6],"tags":[319],"class_list":["post-5312","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-engineering","category-product-design","tag-tag-design"],"acf":[],"yoast_head":"\nDear Designers: CSS Display Grid Makes Layout Simple<\/title>\n<meta name=\"description\" content=\"Build responsive web layouts with far less code: how CSS display grid works, how to match the same grid values in Sketch, and how to start using it today.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dear Designers: CSS Display Grid Makes Layout Simple\" \/>\n<meta property=\"og:description\" content=\"Build responsive web layouts with far less code: how CSS display grid works, how to match the same grid values in Sketch, and how to start using it today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/\" \/>\n<meta property=\"og:site_name\" content=\"Cheesecake Labs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cheesecakelabs\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-15T14:29:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-15T01:41:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/nativereact_banner.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Cheesecake Labs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:site\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/\"},\"author\":{\"name\":\"Danilo Woznica\"},\"headline\":\"Dear designers, love your developers because they’ve learned display grid \u2013 and you’ve done it too\",\"datePublished\":\"2017-09-15T14:29:54+00:00\",\"dateModified\":\"2026-08-15T01:41:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/\"},\"wordCount\":927,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/nativereact_banner.jpg\",\"keywords\":[\"Design\"],\"articleSection\":[\"Product Engineering\",\"Product Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/\",\"name\":\"Dear Designers: CSS Display Grid Makes Layout Simple\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/nativereact_banner.jpg\",\"datePublished\":\"2017-09-15T14:29:54+00:00\",\"dateModified\":\"2026-08-15T01:41:53+00:00\",\"description\":\"Build responsive web layouts with far less code: how CSS display grid works, how to match the same grid values in Sketch, and how to start using it today.\",\"breadcrumb\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/#primaryimage\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/nativereact_banner.jpg\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/nativereact_banner.jpg\",\"width\":2000,\"height\":720,\"caption\":\"nativereact_banner | | Cheesecake Labs\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cheesecakelabs.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dear designers, love your developers because they’ve learned display grid \u2013 and you’ve done it too\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/\",\"name\":\"Cheesecake Labs\",\"description\":\"AI Implementation, Data and Product Engineering\",\"publisher\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#organization\",\"name\":\"Cheesecake Labs\",\"alternateName\":\"Cheesecake Labs Inc\",\"url\":\"https:\/\/cheesecakelabs.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/cheesecakelabs.com\/#logo\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2022\/06\/cheesecake-labs-1.png\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2022\/06\/cheesecake-labs-1.png\",\"caption\":\"Cheesecake Labs\",\"inLanguage\":\"en\"},\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/cheesecakelabs.com\/#primary-image\",\"url\":\"https:\/\/ckl-website-v4-strapi-prod.s3.us-east-2.amazonaws.com\/ai_software_development_company_83fb512983.webp\",\"contentUrl\":\"https:\/\/ckl-website-v4-strapi-prod.s3.us-east-2.amazonaws.com\/ai_software_development_company_83fb512983.webp\",\"width\":1920,\"height\":1080,\"caption\":\"Cheesecake Labs \u2014 AI, Data & Blockchain software development services\",\"inLanguage\":\"en\"},\"sameAs\":[\"https:\/\/www.facebook.com\/cheesecakelabs\",\"https:\/\/x.com\/cheesecakelabs\",\"https:\/\/www.instagram.com\/cheesecakelabs\/\",\"https:\/\/www.linkedin.com\/company\/cheesecake-labs\/\",\"https:\/\/www.youtube.com\/channel\/UCdGEQ5AHJcmIlaOaI5fGGVA\",\"https:\/\/clutch.co\/profile\/cheesecake-labs\",\"https:\/\/www.behance.net\/cheesecakelabs\",\"https:\/\/dribbble.com\/cheesecakelabs\",\"https:\/\/www.designrush.com\/agency\/profile\/cheesecake-labs\",\"https:\/\/www.g2.com\/products\/cheesecake-labs\/reviews\"],\"description\":\"Cheesecake Labs is a software development studio that designs and builds custom digital products \u2014 web, mobile, and platforms \u2014 combining product design and high-performance engineering.\",\"foundingDate\":\"2013\"},{\"@type\":\"Person\",\"name\":\"Danilo Woznica\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/danilo-300x300.jpg\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/danilo-300x300.jpg\",\"caption\":\"Danilo Woznica\"},\"description\":\"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/autor\/danilo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dear Designers: CSS Display Grid Makes Layout Simple","description":"Build responsive web layouts with far less code: how CSS display grid works, how to match the same grid values in Sketch, and how to start using it today.","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:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/","og_locale":"en_US","og_type":"article","og_title":"Dear Designers: CSS Display Grid Makes Layout Simple","og_description":"Build responsive web layouts with far less code: how CSS display grid works, how to match the same grid values in Sketch, and how to start using it today.","og_url":"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/","og_site_name":"Cheesecake Labs","article_publisher":"https:\/\/www.facebook.com\/cheesecakelabs","article_published_time":"2017-09-15T14:29:54+00:00","article_modified_time":"2026-08-15T01:41:53+00:00","og_image":[{"width":2000,"height":720,"url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/nativereact_banner.jpg","type":"image\/jpeg"}],"author":"Cheesecake Labs","twitter_card":"summary_large_image","twitter_creator":"@cheesecakelabs","twitter_site":"@cheesecakelabs","twitter_misc":{"Written by":null,"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/#article","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/"},"author":{"name":"Danilo Woznica"},"headline":"Dear designers, love your developers because they’ve learned display grid \u2013 and you’ve done it too","datePublished":"2017-09-15T14:29:54+00:00","dateModified":"2026-08-15T01:41:53+00:00","mainEntityOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/"},"wordCount":927,"commentCount":0,"publisher":{"@id":"https:\/\/cheesecakelabs.com\/blog\/#organization"},"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/nativereact_banner.jpg","keywords":["Design"],"articleSection":["Product Engineering","Product Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/","url":"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/","name":"Dear Designers: CSS Display Grid Makes Layout Simple","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/#primaryimage"},"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/nativereact_banner.jpg","datePublished":"2017-09-15T14:29:54+00:00","dateModified":"2026-08-15T01:41:53+00:00","description":"Build responsive web layouts with far less code: how CSS display grid works, how to match the same grid values in Sketch, and how to start using it today.","breadcrumb":{"@id":"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/#primaryimage","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/nativereact_banner.jpg","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/nativereact_banner.jpg","width":2000,"height":720,"caption":"nativereact_banner | | Cheesecake Labs"},{"@type":"BreadcrumbList","@id":"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cheesecakelabs.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Dear designers, love your developers because they’ve learned display grid \u2013 and you’ve done it too"}]},{"@type":"WebSite","@id":"https:\/\/cheesecakelabs.com\/blog\/#website","url":"https:\/\/cheesecakelabs.com\/blog\/","name":"Cheesecake Labs","description":"AI Implementation, Data and Product Engineering","publisher":{"@id":"https:\/\/cheesecakelabs.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cheesecakelabs.com\/blog\/#organization","name":"Cheesecake Labs","alternateName":"Cheesecake Labs Inc","url":"https:\/\/cheesecakelabs.com\/","logo":{"@type":"ImageObject","@id":"https:\/\/cheesecakelabs.com\/#logo","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2022\/06\/cheesecake-labs-1.png","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2022\/06\/cheesecake-labs-1.png","caption":"Cheesecake Labs","inLanguage":"en"},"image":{"@type":"ImageObject","@id":"https:\/\/cheesecakelabs.com\/#primary-image","url":"https:\/\/ckl-website-v4-strapi-prod.s3.us-east-2.amazonaws.com\/ai_software_development_company_83fb512983.webp","contentUrl":"https:\/\/ckl-website-v4-strapi-prod.s3.us-east-2.amazonaws.com\/ai_software_development_company_83fb512983.webp","width":1920,"height":1080,"caption":"Cheesecake Labs \u2014 AI, Data & Blockchain software development services","inLanguage":"en"},"sameAs":["https:\/\/www.facebook.com\/cheesecakelabs","https:\/\/x.com\/cheesecakelabs","https:\/\/www.instagram.com\/cheesecakelabs\/","https:\/\/www.linkedin.com\/company\/cheesecake-labs\/","https:\/\/www.youtube.com\/channel\/UCdGEQ5AHJcmIlaOaI5fGGVA","https:\/\/clutch.co\/profile\/cheesecake-labs","https:\/\/www.behance.net\/cheesecakelabs","https:\/\/dribbble.com\/cheesecakelabs","https:\/\/www.designrush.com\/agency\/profile\/cheesecake-labs","https:\/\/www.g2.com\/products\/cheesecake-labs\/reviews"],"description":"Cheesecake Labs is a software development studio that designs and builds custom digital products \u2014 web, mobile, and platforms \u2014 combining product design and high-performance engineering.","foundingDate":"2013"},{"@type":"Person","name":"Danilo Woznica","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/danilo-300x300.jpg","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/danilo-300x300.jpg","caption":"Danilo Woznica"},"description":"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.","url":"https:\/\/cheesecakelabs.com\/blog\/autor\/danilo\/"}]}},"_links":{"self":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/5312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/comments?post=5312"}],"version-history":[{"count":2,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/5312\/revisions"}],"predecessor-version":[{"id":14626,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/5312\/revisions\/14626"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media\/5403"}],"wp:attachment":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media?parent=5312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/categories?post=5312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/tags?post=5312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
If you wish to learn and understand more about the syntax and distribution options of the elements, I recommend reading the documentation on MDN<\/a> or CSS Tricks<\/a>.<\/p>\n