{"id":71457,"date":"2019-10-05T04:19:22","date_gmt":"2019-10-05T11:19:22","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/10\/editorial-design-patterns-with-css-grid-and-named-columns\/"},"modified":"2019-10-05T04:19:22","modified_gmt":"2019-10-05T11:19:22","slug":"editorial-design-patterns-with-css-grid-and-named-columns","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/10\/editorial-design-patterns-with-css-grid-and-named-columns\/","title":{"rendered":"Editorial Design Patterns With CSS Grid And Named Columns"},"content":{"rendered":"Editorial Design Patterns With CSS Grid And Named Columns<\/title><\/p>\n<article>\n<header>\n<h1>Editorial Design Patterns With CSS Grid And Named Columns<\/h1>\n<address>Rachel Andrew<\/address>\n<p> <time datetime=\"2019-10-04T12:30:00+02:00\">2019-10-04T12:30:00+02:00<\/time><time datetime=\"2019-10-05T11:07:37+00:00\">2019-10-05T11:07:37+00:00<\/time><\/header>\n<p>Many websites, in particular those which display long-form content, have a fairly straightforward repeating pattern of components: a full-width area for images, a central content area, and perhaps a split view of two half-width blocks. These components repeat to display an article, images and other related content \u2014 with content editors selecting the right component as they create articles for publication.<\/p>\n<p>In this article, I\u2019m going to demonstrate an approach to this kind of editorial design, which builds on a few techniques some of which are discussed in the following articles:<\/p>\n<ul>\n<li>\u201c<a href=\"https:\/\/cloudfour.com\/thinks\/breaking-out-with-css-grid-layout\/\">Breaking Out With CSS Grid Layout<\/a>\u201d<\/li>\n<li>\u201c<a href=\"https:\/\/rachelandrew.co.uk\/archives\/2017\/06\/01\/breaking-out-with-css-grid-explained\/\">Breaking Out With CSS Grid Explained<\/a>\u201d<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2017\/10\/naming-things-css-grid-layout\/\">Naming Things In CSS Grid Layout<\/a>\u201d<\/li>\n<\/ul>\n<p>In addition to this being a nice way to name sections of your layout, this technique exposes a whole bunch of interesting things about Grid Layout which you may find useful in creating your own layout patterns. It also demonstrates more of the promise of subgrid (a part of the upcoming Level 2 of the grid specification and being implemented in Firefox).<\/p>\n<div data-component=\"FeaturePanel\" data-audience=\"non-subscriber\" data-remove=\"true\"><\/div>\n<h3>Naming Things In CSS Grid Layout<\/h3>\n<p>When using CSS Grid Layout, you can name lines and areas. Both of these things can make working with Grid \u2014 especially complex grids \u2014 more straightforward. Defining naming conventions for things in your layout can be useful when working with your team; it is much easier to understand where anything placed with <code>grid-area: content<\/code> will end up than having something placed from <code>column-line: 3 \/ 9<\/code>.<\/p>\n<p>When using the <code>grid-template-areas<\/code> approach, you give the items that you want to place on the grid a name by using the <code>grid-area<\/code> property and then placing them around the grid. In the following example, the item with <code>grid-area: content<\/code> goes into the grid area defined by the <code>grid-template-areas<\/code> property:<\/p>\n<figure>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"zYOQBba\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen [Layout With Named Area](https:\/\/codepen.io\/rachelandrew\/pen\/zYOQBba) by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/zYOQBba\">Layout With Named Area<\/a> by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/figcaption><\/figure>\n<p>This works well for components where you have one item to go into one area; however, if you want to place multiple things into the content area (one below the other), using <code>grid-area<\/code> is the wrong approach. Instead, you might define names for the column lines and place the item from the start to end line.<\/p>\n<figure>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"xxKNONQ\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen [Layout With Named Columns](https:\/\/codepen.io\/rachelandrew\/pen\/xxKNONQ) by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/xxKNONQ\">Layout With Named Columns<\/a> by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/figcaption><\/figure>\n<p>This isn\u2019t as neat, however, when using the grid-area approach we have to know both the start and end line when placing an item using <code>grid-column<\/code> or <code>grid-row<\/code> \u2014 or do we?<\/p>\n<p>Take a look at this next CodePen example. My items are placed using a single name or ident by using the <code>grid-column<\/code> property, even though some of the grid areas being targeted cross a number of columns:<\/p>\n<figure>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"mdbYEod\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen [Layout with Named Columns](https:\/\/codepen.io\/rachelandrew\/pen\/mdbYEod) by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/mdbYEod\">Layout with Named Columns<\/a> by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/figcaption><\/figure>\n<p>My aim here is to abstract away the complexity of the grid setup when actually using the grid. I can put a lot of work into creating the initial grid, but then place things without thinking too much about it as I populate my pages. I also want to make sure that we can repeat the components as often as we need to as we build up the article. What I have in mind is a content creator using a CMS, and creating blocks of content using the different patterns whilst knowing that they will be placed correctly one below the other on the overall grid.<\/p>\n<p>In order to understand how I got to this point requires an understanding of a few things about CSS Grid Layout as well as named lines and areas.<\/p>\n<div><\/div>\n<h4>We Can Name Lines<\/h4>\n<p>As you\u2019ve already seen in my second example above, we can name lines on the grid that can be pretty much anything we like \u2014 other than the word <code>span<\/code>. The name is an <em>ident<\/em> rather than a string which is why it is not quoted.<\/p>\n<p>However, you will see many examples where the naming conventions <code>name-start<\/code> and <code>name-end<\/code> are used that append <code>-start<\/code> onto the name of the start line and <code>-end<\/code> on the name of the end line. This is not purely convention and for the technique I am going to show you why we need to name our lines this way. So you should pick a name for the area you are describing, and then add the <code>-start<\/code> and <code>-end<\/code> suffixes \u2014 which need to match, of course!<\/p>\n<p>We name our lines inside square brackets. Lines can (and often need to) have multiple names. In this case, space separates the names. When placing the items using line-based positioning, you can pick any name for the line to do the placement.<\/p>\n<p>With our named lines in place, we could place our items using <code>grid-column<\/code> by specifying the start and end line name. This pattern is just the same as using line numbers, so the name before the slash is the start line and the name after is the end line.<\/p>\n<figure>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"VwZOPgO\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen [Example using start and end lines](https:\/\/codepen.io\/rachelandrew\/pen\/VwZOPgO) by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/VwZOPgO\">Example using start and end lines<\/a> by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/figcaption><\/figure>\n<p>This places the items but isn\u2019t the neat single name per item that I used in the example. However, we now have everything in place due to the special way that Grid handles named areas and lines.<\/p>\n<h4>Line Names Give Us A Named Area<\/h4>\n<p>Assuming you have named your lines with <code>-start<\/code> and <code>-end<\/code> as I have, Grid will give you a named area of the main name you used. Therefore, in my case, I have areas named <code>content<\/code>, <code>start-half<\/code>, <code>end-half<\/code>, <code>full<\/code> and <code>center<\/code>. Each of these areas is a single row (as I don\u2019t have named rows), however, it will span the column tracks from the <code>-start<\/code> to the <code>-end<\/code> line.<\/p>\n<h4>Named Areas Give Us A Named Line Of The Main Name Used<\/h4>\n<p>If we want to be able to place our items as if we have a column name, we also need to make use of the fact that when we create a grid area, we get a line name of the main name used; that is, the main name being the name with <code>-start<\/code> and <code>-end<\/code> removed. This line name resolves to the start or end of the area depending on whether we are targeting <code>grid-column-start<\/code> or <code>grid-column-end<\/code>.<\/p>\n<p>So, we have an area named <code>content<\/code>, because we have column lines named <code>content-start<\/code> and <code>content-end<\/code>. The area named <code>content<\/code> also gives us the ability to use <code>grid-column-start: content<\/code> which will resolve to the start line of that content area, while <code>grid-column-end: content<\/code> will resolve to the end line of the content area.<\/p>\n<p>This, therefore, means that we can place an item into the content area by using the following:<\/p>\n<pre><code>.content {\n grid-column: content \/ content;\n}\n<\/code><\/pre>\n<p>Next, we can now tidy up this technique further due to the fact that if you use a named line for <code>grid-column-start<\/code> and omit the end line (rather than spanning one track as would be the case if you used line numbers), grid copies the name over to the end line. Therefore, <code>grid-column: content<\/code> is exactly the same as <code>grid-column: content \/ content;<\/code><\/p>\n<p>This is then all we need to be able to place items using <code>grid-column<\/code> with a simple, single name. This behavior is all exactly as specified and not some kind of \u201chack\u201d. It demonstrates the depth of thinking that went into the creation of the Grid Layout specification, and the amount of careful work that has gone into making it so straightforward to lay items out in our designs.<\/p>\n<div><\/div>\n<h3>Giving This Technique Superpowers With Subgrid<\/h3>\n<p>I think this technique is a nice one that enables a very straightforward way of declaring where elements should be placed on the grid. However, if we add subgrid support to the mix, it becomes very powerful indeed.<\/p>\n<p>Currently, subgrid is being implemented in Firefox, and so these next examples require Firefox Nightly to run. You can <a href=\"https:\/\/www.mozilla.org\/en-GB\/firefox\/channel\/desktop\/\">download Nightly here<\/a>.<\/p>\n<p>The <code>subgrid<\/code> value of <code>grid-template-columns<\/code> and <code>grid-template-rows<\/code> means that sizing created on a parent grid can be opted into by an item which is a child of the grid (assuming it is also using grid layout) by having <code>display: grid<\/code> applied.<\/p>\n<p><strong>Note<\/strong>: <em>You can read more about the features of subgrid in my articles here on Smashing Magazine \u201c<a href=\"https:\/\/www.smashingmagazine.com\/2018\/07\/css-grid-2\/\">CSS Grid Level 2: Here Comes Subgrid<\/a>\u201d and \u201c<a href=\"https:\/\/www.smashingmagazine.com\/2019\/05\/display-grid-subgrid\/\">Digging Into The Display Property: Grids All The Way Down<\/a>\u201d.<\/em><\/p>\n<h4>Line Names From The Parent Are Passed Into Subgrids<\/h4>\n<p>In addition to the track sizing information being passed into the child grid, any line names set on the parent will be passed in. This means that we can use our \u201ccolumn names\u201d within subgridded components, making this solution very useful in a world where subgrid exists. An item placed in <code>content<\/code> \u2014 even if nested down inside subgrids \u2014 will line up with one placed as a direct child of the main grid.<\/p>\n<p>In this next example, I have nested two elements directly inside the div with a class of <code>full-2<\/code>. I have also placed a <code>ul<\/code> inside <code>.content<\/code>. If we look at the items inside <code>full-2<\/code>, in order to place these on the parent grid, we need to make the selector <code>full-2<\/code> a grid with <code>display: grid<\/code> then use the <code>grid-template-columns<\/code> property with a value of <code>subgrid<\/code>.<\/p>\n<p>This causes the grid on <code>.full-2<\/code> to use the tracks defined on the parent grid, and have access to the named lines defined there. As this is a full-width item, this really will behave just like the parent grid in terms of placing our items. We can then use any of the names we defined for the different columns to place the items. In this case, I have set both child elements to <code>grid-column: center<\/code> and they display one after the other in that center area.<\/p>\n<pre><code>.full-2 {\n grid-row: 4;\n grid-column: full;\n display: grid;\n row-gap: 10px;\n grid-template-columns: subgrid;\n}\n\n.full-2 > div {\n background-color: rgb(124,222,220);\n grid-column: center;\n}\n<\/code><\/pre>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6499e5c8-a67d-44b4-b141-ad5f2e39d6ba\/subgrid1.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/subgrid1.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6499e5c8-a67d-44b4-b141-ad5f2e39d6ba\/subgrid1.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6499e5c8-a67d-44b4-b141-ad5f2e39d6ba\/subgrid1.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6499e5c8-a67d-44b4-b141-ad5f2e39d6ba\/subgrid1.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6499e5c8-a67d-44b4-b141-ad5f2e39d6ba\/subgrid1.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/subgrid1.png?w=900\" sizes=\"100vw\" alt=\"A set of boxes, one with other boxes nested instead\"><\/a><figcaption>\n The nested elements line up with the grid on the parent (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6499e5c8-a67d-44b4-b141-ad5f2e39d6ba\/subgrid1.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>If we take a look at our nested <code>ul<\/code> inside <code>.content<\/code>, we will need to create a subgrid on the selector <code>.content<\/code> just as with the last example; when we do this, the <code>ul<\/code> falls into the first track of the subgrid. If we want to lay out the listen items on the subgrid, we need to do two things: cause the ul to take up the same area as its parent by placing it with <code>grid-column: content<\/code>, and then making it a grid which is a subgrid.<\/p>\n<p>Having done this the list items will lay out using auto-placement into the column tracks of the subgrid:<\/p>\n<pre><code>.content {\n grid-row: 1;\n grid-column: content;\n display: grid;\n grid-template-columns: subgrid;\n}\n\n.content ul {\n grid-column: content;\n display: grid;\n row-gap: 10px;\n grid-template-columns: subgrid;\n}\n<\/code><\/pre>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3f540af7-1511-4bf5-b0a7-6edb3d82fce9\/subgrid2.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/subgrid2.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3f540af7-1511-4bf5-b0a7-6edb3d82fce9\/subgrid2.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3f540af7-1511-4bf5-b0a7-6edb3d82fce9\/subgrid2.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3f540af7-1511-4bf5-b0a7-6edb3d82fce9\/subgrid2.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3f540af7-1511-4bf5-b0a7-6edb3d82fce9\/subgrid2.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/subgrid2.png?w=900\" sizes=\"100vw\" alt=\"A set of boxes, the nested boxes falling into the tracks of the grid\"><\/a><figcaption>\n With auto-placement the items fall into the tracks of the parent (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3f540af7-1511-4bf5-b0a7-6edb3d82fce9\/subgrid2.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>Once you have your grid, you can use the names from the parent in exactly the same way as before.<\/p>\n<pre><code>.content li:nth-child(1) {\n grid-column: center;\n}\n\n.content li:nth-child(2) {\n grid-column: start-half;\n}\n\n.content li:nth-child(3) {\n grid-column: end-half;\n}\n\n.content li:nth-child(4) {\n grid-column: content;\n}\n<\/code><\/pre>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fdcb53ee-613e-4ec1-aecf-72dffa585964\/subgrid-final.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/subgrid-final.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fdcb53ee-613e-4ec1-aecf-72dffa585964\/subgrid-final.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fdcb53ee-613e-4ec1-aecf-72dffa585964\/subgrid-final.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fdcb53ee-613e-4ec1-aecf-72dffa585964\/subgrid-final.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fdcb53ee-613e-4ec1-aecf-72dffa585964\/subgrid-final.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/subgrid-final.png?w=900\" sizes=\"100vw\" alt=\"Screenshot of various boxes, which line up in columns\"><\/a><figcaption>\n The completed subgrid layout (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fdcb53ee-613e-4ec1-aecf-72dffa585964\/subgrid-final.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>If you have Firefox Nightly, you can see the full demo in this CodePen example:<\/p>\n<figure>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"OJLYRRb\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen [Naming Column and Subgrid](https:\/\/codepen.io\/rachelandrew\/pen\/OJLYRRb) by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/OJLYRRb\">Naming Column and Subgrid<\/a> by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/figcaption><\/figure>\n<p>You can keep \u201cnesting\u2019 subgrids into your markup structure like this, and each time the line names will be passed through. This is a feature that I think will be particularly useful.<\/p>\n<p>When you create a subgrid, the line numbers correspond to the lines of the subgrid and not the parent grid. Therefore, if you do want to ensure that elements in the subgrid line up with the parent grid, then using line names or named areas (as shown in this example) will make that straightforward and logical.<\/p>\n<h3>Wrapping Up<\/h3>\n<p>You now know how to use this technique for your main grid, and hopefully, it won\u2019t take too long before we start seeing support for subgrid in all browsers. It\u2019ll enable techniques such as this one and make it incredibly powerful for us to use.<\/p>\n<div>\n <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/logo-red-4.png?w=900\" alt=\"Smashing Editorial\"><span>(il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Editorial Design Patterns With CSS Grid And Named Columns Editorial Design Patterns With CSS Grid And Named Columns Rachel Andrew 2019-10-04T12:30:00+02:002019-10-05T11:07:37+00:00 Many websites, in particular those which display long-form content, have a fairly straightforward repeating pattern of components: a full-width area for images, a central content area, and perhaps a split view of two half-width…<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/editorial-design-patterns-with-css-grid-and-named-columns\/\"> Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":71458,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-71457","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Editorial Design Patterns With CSS Grid And Named ColumnsEditorial Design Patterns With CSS Grid And Named Columns Rachel Andrew 2019-10-04T12:30:00+02:002019-10-05T11:07:37+00:00Many websites, in particular those which display long-form content, have a fairly straightforward repeating pattern of components: a full-width area for images, a central content area, and perhaps a split view of two half-width blocks. These\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/editorial-design-patterns-with-css-grid-and-named-columns\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Editorial Design Patterns With CSS Grid And Named Columns | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"Editorial Design Patterns With CSS Grid And Named ColumnsEditorial Design Patterns With CSS Grid And Named Columns Rachel Andrew 2019-10-04T12:30:00+02:002019-10-05T11:07:37+00:00Many websites, in particular those which display long-form content, have a fairly straightforward repeating pattern of components: a full-width area for images, a central content area, and perhaps a split view of two half-width blocks. These\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/editorial-design-patterns-with-css-grid-and-named-columns\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-10-05T11:19:22+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-10-05T11:19:22+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Editorial Design Patterns With CSS Grid And Named Columns | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Editorial Design Patterns With CSS Grid And Named ColumnsEditorial Design Patterns With CSS Grid And Named Columns Rachel Andrew 2019-10-04T12:30:00+02:002019-10-05T11:07:37+00:00Many websites, in particular those which display long-form content, have a fairly straightforward repeating pattern of components: a full-width area for images, a central content area, and perhaps a split view of two half-width blocks. These\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/editorial-design-patterns-with-css-grid-and-named-columns\\\/#article\",\"name\":\"Editorial Design Patterns With CSS Grid And Named Columns | Design for Immersive Technologies\",\"headline\":\"Editorial Design Patterns With CSS Grid And Named Columns\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/subgrid1.png?fit=400%2C135&ssl=1\",\"width\":400,\"height\":135},\"datePublished\":\"2019-10-05T04:19:22-07:00\",\"dateModified\":\"2019-10-05T04:19:22-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/editorial-design-patterns-with-css-grid-and-named-columns\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/editorial-design-patterns-with-css-grid-and-named-columns\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/editorial-design-patterns-with-css-grid-and-named-columns\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/editorial-design-patterns-with-css-grid-and-named-columns\\\/#listItem\",\"name\":\"Editorial Design Patterns With CSS Grid And Named Columns\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/editorial-design-patterns-with-css-grid-and-named-columns\\\/#listItem\",\"position\":3,\"name\":\"Editorial Design Patterns With CSS Grid And Named Columns\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/editorial-design-patterns-with-css-grid-and-named-columns\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/editorial-design-patterns-with-css-grid-and-named-columns\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/editorial-design-patterns-with-css-grid-and-named-columns\\\/\",\"name\":\"Editorial Design Patterns With CSS Grid And Named Columns | Design for Immersive Technologies\",\"description\":\"Editorial Design Patterns With CSS Grid And Named ColumnsEditorial Design Patterns With CSS Grid And Named Columns Rachel Andrew 2019-10-04T12:30:00+02:002019-10-05T11:07:37+00:00Many websites, in particular those which display long-form content, have a fairly straightforward repeating pattern of components: a full-width area for images, a central content area, and perhaps a split view of two half-width blocks. These\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/editorial-design-patterns-with-css-grid-and-named-columns\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/subgrid1.png?fit=400%2C135&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/editorial-design-patterns-with-css-grid-and-named-columns\\\/#mainImage\",\"width\":400,\"height\":135},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/editorial-design-patterns-with-css-grid-and-named-columns\\\/#mainImage\"},\"datePublished\":\"2019-10-05T04:19:22-07:00\",\"dateModified\":\"2019-10-05T04:19:22-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Editorial Design Patterns With CSS Grid And Named Columns | Design for Immersive Technologies","description":"Editorial Design Patterns With CSS Grid And Named ColumnsEditorial Design Patterns With CSS Grid And Named Columns Rachel Andrew 2019-10-04T12:30:00+02:002019-10-05T11:07:37+00:00Many websites, in particular those which display long-form content, have a fairly straightforward repeating pattern of components: a full-width area for images, a central content area, and perhaps a split view of two half-width blocks. These","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/editorial-design-patterns-with-css-grid-and-named-columns\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/editorial-design-patterns-with-css-grid-and-named-columns\/#article","name":"Editorial Design Patterns With CSS Grid And Named Columns | Design for Immersive Technologies","headline":"Editorial Design Patterns With CSS Grid And Named Columns","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/subgrid1.png?fit=400%2C135&ssl=1","width":400,"height":135},"datePublished":"2019-10-05T04:19:22-07:00","dateModified":"2019-10-05T04:19:22-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/editorial-design-patterns-with-css-grid-and-named-columns\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/editorial-design-patterns-with-css-grid-and-named-columns\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/editorial-design-patterns-with-css-grid-and-named-columns\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/editorial-design-patterns-with-css-grid-and-named-columns\/#listItem","name":"Editorial Design Patterns With CSS Grid And Named Columns"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/editorial-design-patterns-with-css-grid-and-named-columns\/#listItem","position":3,"name":"Editorial Design Patterns With CSS Grid And Named Columns","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/editorial-design-patterns-with-css-grid-and-named-columns\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/editorial-design-patterns-with-css-grid-and-named-columns\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/editorial-design-patterns-with-css-grid-and-named-columns\/","name":"Editorial Design Patterns With CSS Grid And Named Columns | Design for Immersive Technologies","description":"Editorial Design Patterns With CSS Grid And Named ColumnsEditorial Design Patterns With CSS Grid And Named Columns Rachel Andrew 2019-10-04T12:30:00+02:002019-10-05T11:07:37+00:00Many websites, in particular those which display long-form content, have a fairly straightforward repeating pattern of components: a full-width area for images, a central content area, and perhaps a split view of two half-width blocks. These","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/editorial-design-patterns-with-css-grid-and-named-columns\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/subgrid1.png?fit=400%2C135&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/editorial-design-patterns-with-css-grid-and-named-columns\/#mainImage","width":400,"height":135},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/editorial-design-patterns-with-css-grid-and-named-columns\/#mainImage"},"datePublished":"2019-10-05T04:19:22-07:00","dateModified":"2019-10-05T04:19:22-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"Editorial Design Patterns With CSS Grid And Named Columns | Design for Immersive Technologies","og:description":"Editorial Design Patterns With CSS Grid And Named ColumnsEditorial Design Patterns With CSS Grid And Named Columns Rachel Andrew 2019-10-04T12:30:00+02:002019-10-05T11:07:37+00:00Many websites, in particular those which display long-form content, have a fairly straightforward repeating pattern of components: a full-width area for images, a central content area, and perhaps a split view of two half-width blocks. These","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/editorial-design-patterns-with-css-grid-and-named-columns\/","article:published_time":"2019-10-05T11:19:22+00:00","article:modified_time":"2019-10-05T11:19:22+00:00","twitter:card":"summary","twitter:title":"Editorial Design Patterns With CSS Grid And Named Columns | Design for Immersive Technologies","twitter:description":"Editorial Design Patterns With CSS Grid And Named ColumnsEditorial Design Patterns With CSS Grid And Named Columns Rachel Andrew 2019-10-04T12:30:00+02:002019-10-05T11:07:37+00:00Many websites, in particular those which display long-form content, have a fairly straightforward repeating pattern of components: a full-width area for images, a central content area, and perhaps a split view of two half-width blocks. These"},"aioseo_meta_data":{"post_id":"71457","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 17:23:13","updated":"2026-09-02 06:02:33","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">»<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">»<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tEditorial Design Patterns With CSS Grid And Named Columns\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"Editorial Design Patterns With CSS Grid And Named Columns","link":"https:\/\/www.taterboy.com\/blog\/2019\/10\/editorial-design-patterns-with-css-grid-and-named-columns\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-iAx","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/subgrid1.png?fit=400%2C135&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/71457","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=71457"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/71457\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/71458"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=71457"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=71457"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=71457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}