{"id":5312,"date":"2017-09-15T14:29:54","date_gmt":"2017-09-15T14:29:54","guid":{"rendered":"https:\/\/cheesecakelabs.com\/blog\/?p=5312\/"},"modified":"2022-07-01T17:31:33","modified_gmt":"2022-07-01T17:31:33","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 have 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 the web layout works<\/strong><\/h2>\n

All the options mentioned above make sense when applied on static medias 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, pages need to load quickly, while being accessible for screen readers and you 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 in 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>, 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 for 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
The grid display solution!<\/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 would be filled with content.<\/span><\/p>\n
Let’s create a of 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
Only by using this <\/span>amount of the code<\/b>, the elements will already fit inside the grid and will never break or exceed the configured width \u2013 a problem that existed on 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
In the Sketch Layout<\/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 on the 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 header, sidebar, article and a 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> which will be the layout format, 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 in the 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, it doesn’t matter the order or position of HTML, 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 and with more distinction between desktop and mobile, using elements that 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 efforts.<\/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 complexities, unreadable codes and upset developers. To see more about these possibilities, I recommend the website Grid by Example<\/a><\/span> where it 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 the floats and now flexbox and grid. Today, the web takes important steps towards friendly code and with possibilities that don\u2019t limit designers 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":{"footnotes":""},"categories":[6,432],"tags":[319],"class_list":["post-5312","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-design","category-engineering","tag-tag-design"],"yoast_head":"\nDear designers, love your developers because they've learned display grid \u2013 and you've done it too<\/title>\n<meta name=\"description\" content=\"The capacity to build web layouts have been improving and what\u2019s best: it is so simple that you can start using it right now!\" \/>\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, love your developers because they've learned display grid \u2013 and you've done it too\" \/>\n<meta property=\"og:description\" content=\"The capacity to build web layouts have been improving and what\u2019s best: it is so simple that you can start using it right now!\" \/>\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=\"2022-07-01T17:31:33+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\":\"2022-07-01T17:31:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/\"},\"wordCount\":921,\"commentCount\":0,\"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 Design\",\"Engineering\"],\"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, love your developers because they've learned display grid \u2013 and you've done it too\",\"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\":\"2022-07-01T17:31:33+00:00\",\"author\":{\"@type\":\"person\",\"name\":\"Danilo Woznica\"},\"description\":\"The capacity to build web layouts have been improving and what\u2019s best: it is so simple that you can start using it right now!\",\"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},{\"@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\":\"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..\",\"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\":\"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, love your developers because they've learned display grid \u2013 and you've done it too","description":"The capacity to build web layouts have been improving and what\u2019s best: it is so simple that you can start using it right now!","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, love your developers because they've learned display grid \u2013 and you've done it too","og_description":"The capacity to build web layouts have been improving and what\u2019s best: it is so simple that you can start using it right now!","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":"2022-07-01T17:31:33+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":"2022-07-01T17:31:33+00:00","mainEntityOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/dear-designers-love-developers-learned-display-grid\/"},"wordCount":921,"commentCount":0,"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 Design","Engineering"],"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, love your developers because they've learned display grid \u2013 and you've done it too","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":"2022-07-01T17:31:33+00:00","author":{"@type":"person","name":"Danilo Woznica"},"description":"The capacity to build web layouts have been improving and what\u2019s best: it is so simple that you can start using it right now!","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},{"@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":"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..","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":"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":1,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/5312\/revisions"}],"predecessor-version":[{"id":10267,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/5312\/revisions\/10267"}],"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 you to read the documentation in MDN<\/a> or in CSS Tricks<\/a>.<\/p>\n