{"id":353473,"date":"2021-10-15T09:18:20","date_gmt":"2021-10-15T16:18:20","guid":{"rendered":"https:\/\/css-tricks.com\/?p=353473"},"modified":"2021-10-18T13:36:31","modified_gmt":"2021-10-18T20:36:31","slug":"expandable-sections-within-a-css-grid","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/expandable-sections-within-a-css-grid\/","title":{"rendered":"Expandable Sections Within a CSS Grid"},"content":{"rendered":"\n<p>I love CSS Grid. I love how, with just a few lines of code, we can achieve fully responsive grid layouts, often without any media queries at all. I\u2019m quite comfortable wrangling CSS Grid to produce interesting layouts, while keeping the HTML markup clean and simple.<\/p>\n\n\n\n<p>But recently, I was presented with a unique UI conundrum to solve. Essentially, any given grid cell could have a button that would open up another, larger area that is also part of the grid. But this new larger grid cell needed to be:<\/p>\n\n\n\n<ol><li>right below the cell that opened it, and<\/li><li>full width.<\/li><\/ol>\n\n\n\n<p>Turns out there is a nice solution to it, and in the spirit of CSS Grid itself, it only involves a couple of lines of code. In this article, I\u2019ll combine three one-line CSS Grid \u201ctricks\u201d to solve this. No JavaScript needed at all.<\/p>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"h-an-explanation-of-the-actual-problem-i-need-to-solve\">An explanation of the actual problem I need to solve<\/h3>\n\n\n<p>Here\u2019s a minimalist UI example of what I needed to do:<\/p>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='181' src='https:\/\/videopress.com\/embed\/PiSuwfHm?preloadContent=metadata&amp;hd=0&amp;cover=1' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><\/figure>\n\n\n\n<p>This is our actual product card grid, as rendered in our Storybook component library:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"837\" height=\"813\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/storybook.jpg?resize=837%2C813&#038;ssl=1\" alt=\"A grid of product cards in a three by two layout. Each card has a placeholder gray image, product name, descriptions, price, and small text.\" class=\"wp-image-353475\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/storybook.jpg?w=837&amp;ssl=1 837w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/storybook.jpg?resize=300%2C291&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/storybook.jpg?resize=768%2C746&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Each product card needed a new \u201cquick view\u201d button added such that, when clicked, it would:<\/p>\n\n\n\n<ul><li>dynamically &#8220;inject&#8221; a new full-width card (containing more detailed product information) immediately below the product card that was clicked,<\/li><li>without disrupting the existing card grid (i.e. retain the DOM source order and the visual order of the rendered cards in the browser), and<\/li><li>still be fully responsive.<\/li><\/ul>\n\n\n\n<p>Hmmm\u2026 was this even possible with our current CSS Grid implementation?<\/p>\n\n\n\n<p>Surely I would need to resort to JavaScript to re-calculate the card positions, and move them around, especially on browser resize? Right?<\/p>\n\n\n\n<p>Google was not my friend. I couldn\u2019t find anything to help me. Even a search of \u201cquick view\u201d implementations only resulted in examples that used modals or overlays to render the injected card. After all, a modal is usually the only choice in situations like this, as it focuses the user on the new content, without needing to disrupt the rest of the page.<\/p>\n\n\n\n<p>I slept on the problem, and ultimately came to a workable solution by combining some of CSS Grid\u2019s most powerful and useful features.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-css-grid-trick-1\">CSS Grid Trick #1<\/h3>\n\n\n<p>I was already employing the first trick for our default grid system, and the product card grid is a specific instance of that approach. Here\u2019s some (simplified) code:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid {\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: repeat(auto-fit, 20rem);\n}<\/code><\/pre>\n\n\n\n<p>The <em>\u201csecret sauce\u201d<\/em> in this code is the <code>grid-template-columns: repeat(auto-fit, 20rem);<\/code> which gives us a grid with columns (<code>20rem<\/code> wide in this example) that are arranged automatically in the available space, wrapping to the next row when there\u2019s not enough room.<\/p>\n\n\n\n<p class=\"is-style-explanation\">Curious about <code>auto-fit<\/code> vs <code>auto-fill<\/code>? Sara Soueidan has written <a href=\"https:\/\/css-tricks.com\/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit\/\">a wonderful explanation of how this works<\/a>. Sara also explains how you can incorporate <code>minmax()<\/code> to enable the column widths to \u201cflex\u201d but, for the purposes of this article, I wanted to define fixed column widths for simplicity.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-css-grid-trick-2\">CSS Grid Trick #2<\/h3>\n\n\n<p>Next, I had to accommodate a new full-width card into the grid:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.fullwidth {\n  grid-column: 1 \/ -1;\n}<\/code><\/pre>\n\n\n\n<p>This code works because <code>grid-template-columns<\/code> in trick #1 creates an \u201cexplicit\u201d grid, so it\u2019s possible to define start and end columns for the <code>.fullwidth<\/code> card, where <code>1 \/ -1<\/code> means \u201cstart in column 1, and span every column up to the very last one.\u201d<\/p>\n\n\n\n<p>Great. A full-width card injected into the grid. But\u2026 now we have gaps above the full-width card.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1299\" height=\"561\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/s_AC997AEA39FD2FBCEEE685A4EBBC9AB5005647A06D0AB838A5679B808C476AED_1632997157687_gaps.jpg?resize=1299%2C561&#038;ssl=1\" alt=\"Two rows of four rectangles. All of the rectangles are light gray and numbered, except one that has a wheat-colored background and another box beneath it containing text, and taking up the full container width.\" class=\"wp-image-353477\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/s_AC997AEA39FD2FBCEEE685A4EBBC9AB5005647A06D0AB838A5679B808C476AED_1632997157687_gaps.jpg?w=1299&amp;ssl=1 1299w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/s_AC997AEA39FD2FBCEEE685A4EBBC9AB5005647A06D0AB838A5679B808C476AED_1632997157687_gaps.jpg?resize=300%2C130&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/s_AC997AEA39FD2FBCEEE685A4EBBC9AB5005647A06D0AB838A5679B808C476AED_1632997157687_gaps.jpg?resize=1024%2C442&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/s_AC997AEA39FD2FBCEEE685A4EBBC9AB5005647A06D0AB838A5679B808C476AED_1632997157687_gaps.jpg?resize=768%2C332&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/s_AC997AEA39FD2FBCEEE685A4EBBC9AB5005647A06D0AB838A5679B808C476AED_1632997157687_gaps.jpg?resize=1000%2C432&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-css-grid-trick-3\">CSS Grid Trick #3<\/h3>\n\n\n<p>Filling the gaps \u2014 I\u2019ve done this before with a faux-masonry approach:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid {\n  grid-auto-flow: dense;\n}<\/code><\/pre>\n\n\n\n<p>That\u2019s it! Required layout achieved.<\/p>\n\n\n\n<p>The <code>grid-auto-flow<\/code> property controls how the CSS Grid auto-placement algorithm works. In this case, the <code>dense<\/code> packing algorithm tries to fills in holes earlier in the grid.<\/p>\n\n\n\n<ul><li>All our grid columns are the <strong>same width<\/strong>. Dense packing also works if the column widths are flexible, for example, by using <code>minmax(20rem, 1f)<\/code>.<\/li><li>All our grid \u201ccells\u201d are the <strong>same height<\/strong> in each row. This is the default CSS Grid behavior. The grid container implicitly has <code>align-items: stretch<\/code> causing cells to occupy 100% of the available row height.<\/li><\/ul>\n\n\n\n<p>The result of all this is that the holes in our grid are filled \u2014 and the beautiful part is that the <strong>original source order<\/strong> is preserved in the rendered output. This is important from an accessibility perspective.<\/p>\n\n\n\n<p class=\"is-style-explanation\">See MDN for a complete explanation of <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/grid-auto-flow\" rel=\"noopener\">how CSS Grid auto-placement works<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-the-complete-solution\">The complete solution<\/h3>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_rNwpwgP\" src=\"\/\/codepen.io\/anon\/embed\/rNwpwgP?height=950&amp;theme-id=1&amp;slug-hash=rNwpwgP&amp;default-tab=result\" height=\"950\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rNwpwgP\" title=\"CodePen Embed rNwpwgP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>These three combined tricks provide a simple layout solution that requires very little CSS. No media queries, and no JavaScript needed.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-but-we-do-still-need-javascript\">But\u2026 we do still need JavaScript?<\/h3>\n\n\n<p>Yes, we do. But not for any layout calculations. It is purely <strong>functional<\/strong> for managing the click events, focus state, injected card display, etc.<\/p>\n\n\n\n<p>For demo purposes in the prototype, the full-width cards have been hard-coded in the HTML in their correct locations in the DOM, and the JavaScript simply toggles their display properties.<\/p>\n\n\n\n<p>In a production environment, however, the injected card would probably be fetched with JavaScript and placed in the correct location. Grid layouts for something like products on an eCommerce site tend to have very heavy DOMs, and we want to avoid unnecessarily bloating the page weight further with lots of additional \u201chidden\u201d content. <\/p>\n\n\n\n<p>Quick views should be considered as a <strong>progressive enhancement<\/strong>, so if JavaScript fails to load, the user is simply taken to the appropriate product details page.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-accessibility-considerations\">Accessibility considerations<\/h3>\n\n\n<p>I\u2019m passionate about using correct semantic HTML markup, adding <code>aria-<\/code> properties when absolutely necessary, and ensuring the UI works with just a keyboard as well as in a screen reader.<\/p>\n\n\n\n<p>So, here\u2019s a rundown of the considerations that went into making this pattern as accessible as possible:<\/p>\n\n\n\n<ul><li>The product card grid uses a <code>&lt;ul&gt;&lt;li&gt;<\/code> construct because we&#8217;re displaying a list of products. Assistive technologies (e.g. screen readers) will therefore understand that there\u2019s a relationship between the cards, and users will be informed how many items are in the list.<\/li><li>The product cards themselves are <code>&lt;article&gt;<\/code> elements, with proper headings, etc.<\/li><li>The HTML source order is preserved for the cards when the <code>.fullwidth<\/code> card is injected, providing a good natural tab order into the injected content, and out again to the next card.<\/li><li><s>The whole card grid is wrapped in an <code>aria-live<\/code> region so that DOM changes are announced to screen readers<\/s>.<\/li><li>Focus management ensures that the injected card <s>receives keyboard focus<\/s>, and on closing the card, keyboard focus is returned to the button that originally triggered the card&#8217;s visibility.<\/li><\/ul>\n\n\n\n<p>Although it isn\u2019t demonstrated in the prototype, these additional enhancements could be added to any production implementation:<\/p>\n\n\n\n<ul><li>Ensure the injected card, when focused, has an appropriate label. This could be as simple as having a heading as the first element inside the content.<\/li><li>Bind the <kbd>ESC<\/kbd> key to close the injected card.<\/li><li>Scroll the browser window so that the injected card is fully visible inside the viewport.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-wrapping-up\">Wrapping up<\/h3>\n\n\n<p>So, what do you think? <br><br>This could be a nice alternative to modals for when we want to reveal additional content, but without hijacking the entire viewport in the process. This might be interesting in other situations as well \u2014 think photo captions in an image grid, helper text, etc. It might even be an alternative to some cases where we\u2019d normally reach for <code>&lt;details&gt;<\/code>\/<code>&lt;summary&gt;<\/code> (as we know those are only best used in <a href=\"https:\/\/adrianroselli.com\/2019\/04\/details-summary-are-not-insert-control-here.html\" rel=\"noopener\">certain contexts<\/a>).<\/p>\n\n\n\n<p>Anyway, I\u2019m interested in how you might use this, or even how you might approach it differently. Let me know in the comments!<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-updates\">Updates<\/h2>\n\n\n<p>Firstly, I&#8217;m really glad that this article has proved helpful to other front-end developers. I knew I couldn&#8217;t have been the only one to face a similar conundrum.<\/p>\n\n\n\n<p>Secondly, following some constructive feedback, I&#8217;ve added a strikethrough to some of the specific accessibility considerations above, and updated my CodePen demo with the following changes:<\/p>\n\n\n\n<ul><li>There is no need for the card grid to be wrapped in an <code>aria-live<\/code> region. Instead, I have made the quick view open and close buttons behave as &#8220;toggle&#8221; buttons, with appropriate <code>aria-expanded<\/code> and <code>aria-controls<\/code> attributes.  I do use this pattern for disclosure widgets (show\/hide, tabs, accordions) but in this case, I was imagining a behavior more similar to a modal interface, albeit inline rather than an overlay. (Thanks to Adrian <a href=\"https:\/\/css-tricks.com\/expandable-sections-within-a-css-grid\/#comment-1783813\">for the tip<\/a>!)<\/li><li>I am no longer programatically focusing on the injected card. Instead, I simply add a <code>tabindex=\"0\"<\/code> so a keyboard user <em>can choose<\/em> whether or not to move to the injected card, or they can simply close the &#8220;toggle&#8221; button again.<\/li><li>I still believe that using a <code>&lt;ul>&lt;li><\/code> construct for the grid is a suitable approach for a <strong>list<\/strong> of product <strong>cards<\/strong>. The afforded semantics indicate an explicit relationship between the cards.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>I love CSS Grid. I love how, with just a few lines of code, we can achieve fully responsive grid layouts, often without any media queries at all. I\u2019m quite comfortable wrangling CSS Grid to produce interesting layouts, while keeping the HTML markup clean and simple. But recently, I was presented with a unique UI [&hellip;]<\/p>\n","protected":false},"author":275699,"featured_media":353505,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Expandable Sections Within a CSS Grid by @basherkev","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[686],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/grid-expanded.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":372634,"url":"https:\/\/css-tricks.com\/using-grid-named-areas-to-visualize-and-reference-your-layout\/","url_meta":{"origin":353473,"position":0},"title":"Using Grid Named Areas to Visualize (and Reference) Your Layout","date":"August 26, 2022","format":false,"excerpt":"Whenever we build simple or complex layouts using CSS Grid, we're usually positioning items with line numbers. Grid layouts contain grid lines that are automatically indexed with positive and negative line numbers (that is unless we explicitly name them). Positioning items with line numbers is a fine way to lay\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/Modern-Desktop-Breakpoint.jpg?fit=1200%2C720&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":322969,"url":"https:\/\/css-tricks.com\/layoutit-grid-learning-css-grid-visually-with-a-generator\/","url_meta":{"origin":353473,"position":1},"title":"Layoutit Grid: Learning CSS Grid Visually With a Generator","date":"October 15, 2020","format":false,"excerpt":"Layoutit Grid is an interactive open source CSS Grid generator. It lets you draw your designs and see the code as you go. You can interact with the code, add or remove track lines and drag them around to change the sizing \u2014 and you get to see the CSS\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/layoutit-grid.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":340490,"url":"https:\/\/css-tricks.com\/devtools-for-css-layouts-2021-edition\/","url_meta":{"origin":353473,"position":2},"title":"DevTools for CSS layouts 2021 edition","date":"May 13, 2021","format":false,"excerpt":"Chen Hui Jing covers some recent movement in DevTools: Firefox\u2019s grid inspector was pretty full-featured from the get-to and\u00a0released together with CSS grid in Firefox 52. It was constantly improved upon since. Chrome added a\u00a0basic grid inspector tool in Chrome 62\u00a0that let developers highlight elements using grid layout, but more\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/chrome-align-1280.png?fit=1200%2C443&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":363541,"url":"https:\/\/css-tricks.com\/an-auto-filling-css-grid-with-max-columns\/","url_meta":{"origin":353473,"position":3},"title":"An Auto-Filling CSS Grid With Max Columns of a Minimum Size","date":"February 16, 2022","format":false,"excerpt":"Within Drupal 10 core, we\u2019re implementing a new auto-filling CSS Grid technique that I think is cool enough to share with the world. The requirements are: The user specifies a maximum number of columns. This is the auto-filling grid\u2019s \u201cnatural\u201d state.If a grid cell goes under a user-specified width, the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/grid-lightbulb.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":342971,"url":"https:\/\/css-tricks.com\/positioning-overlay-content-with-css-grid\/","url_meta":{"origin":353473,"position":4},"title":"Positioning Overlay Content with CSS Grid","date":"June 28, 2021","format":false,"excerpt":"Not news to any web developer in 2021: CSS Grid is an incredibly powerful tool for creating complex, distinct two-dimensional modern web layouts. Recently, I have been experimenting with CSS Grid and alignment properties to create component layouts that contain multiple overlapping elements. These layouts could be styled using absolute\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/snuggle-zone-carousel.png?fit=1200%2C751&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":367178,"url":"https:\/\/css-tricks.com\/exploring-css-grids-implicit-grid-and-auto-placement-powers\/","url_meta":{"origin":353473,"position":5},"title":"Exploring CSS Grid\u2019s Implicit Grid and Auto-Placement Powers","date":"August 1, 2022","format":false,"excerpt":"When working with CSS Grid, the first thing to do is to set display: grid on the element that we want to be become a grid container. Then we explicitly define the grid using a combination of grid-template-columns, grid-template-rows, and grid-template-areas. And from there, the next step is to place\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_F4C924AEFDB642C9861B01422787157264225531682D164A8C42B48A83B84E89_1656674978920_image.png?fit=608%2C742&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/grid-expanded.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/353473"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/275699"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=353473"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/353473\/revisions"}],"predecessor-version":[{"id":354324,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/353473\/revisions\/354324"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/353505"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=353473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=353473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=353473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}