{"id":1087,"date":"2025-05-06T13:00:00","date_gmt":"2025-05-06T13:00:00","guid":{"rendered":"http:\/\/sobre-portugal.com\/?p=1087"},"modified":"2025-05-07T20:23:45","modified_gmt":"2025-05-07T20:23:45","slug":"masonry-in-css-should-grid-evolve-or-stand-aside-for-a-new-module","status":"publish","type":"post","link":"http:\/\/sobre-portugal.com\/index.php\/2025\/05\/06\/masonry-in-css-should-grid-evolve-or-stand-aside-for-a-new-module\/","title":{"rendered":"Masonry\u00a0In CSS: Should Grid Evolve Or Stand Aside\u00a0For\u00a0A\u00a0New Module?"},"content":{"rendered":"<p>              <title>Masonry\u00a0In CSS: Should Grid Evolve Or Stand Aside\u00a0For\u00a0A\u00a0New Module?<\/title><\/p>\n<article>\n<header>\n<h1>Masonry\u00a0In CSS: Should Grid Evolve Or Stand Aside\u00a0For\u00a0A\u00a0New Module?<\/h1>\n<address>Gabriel Shoyombo<\/address>\n<p>                  2025-05-06T13:00:00+00:00<br \/>\n                  2025-05-07T20:02:52+00:00<br \/>\n                <\/header>\n<p>You\u2019ve got a Pinterest-style layout to build, but you\u2019re tired of JavaScript. Could CSS finally have the answer? Well, for a beginner, taking a look at the pins on your Pinterest page, you might be convinced that the CSS grid layout is enough, but not until you begin to build do you realise <code>display: grid<\/code> with additional tweaks is less than enough. In fact, Pinterest built its layout with JavaScript, but how cool would it be if it were just CSS? If there were a CSS display property that gave such a layout without any additional JavaScript, how awesome would that be?<\/p>\n<p>Maybe there is. The CSS grid layout has an <strong>experimental masonry value<\/strong> for <code>grid-template-rows<\/code>. The masonry layout is an irregular, flowing grid. Irregular in the sense that, instead of following a rigid grid pattern with spaces left after shorter pieces, the items in the next row of a masonry layout rise to fill the spaces on the masonry axis. It\u2019s the dream for portfolios, image galleries, and social feeds &mdash; designs that thrive on organic flow. But here\u2019s the catch: while this experimental feature exists (think Firefox Nightly with a flag enabled), it\u2019s not the seamless solution you might expect, thanks to limited browser support and some rough edges in its current form.<\/p>\n<p>Maybe there isn\u2019t. CSS lacks native masonry support, forcing developers to use hacks or JavaScript libraries like <a href=\"https:\/\/masonry.desandro.com\">Masonry.js<\/a>. Developers with a good design background have expressed their criticism about the CSS grid form of masonry, with <a href=\"https:\/\/www.smashingmagazine.com\/native-css-masonry-layout-css-grid\/\">Rachel<\/a> highlighting that <strong>masonry\u2019s organic flow contrasts with Grid\u2019s strict two-dimensional structure<\/strong>, potentially confusing developers expecting Grid-like behaviour or <a href=\"https:\/\/ishadeed.com\/article\/should-masonry-be-part-of-css-grid\/\">Ahmad Shadeed<\/a> fussing about how it makes the grid layout more complex than it should be, potentially overwhelming developers who value Grid\u2019s clarity for structured layouts. <a href=\"https:\/\/css-tricks.com\/css-masonry-css-grid\/\">Geoff<\/a> also echoes Rachel Andrew\u2019s concern that <em>\u201cteaching and learning grid to get to understand masonry behaviour unnecessarily lumps two different formatting contexts into one,\u201d<\/em> complicating education for designers and developers who rely on clear mental models.<\/p>\n<p>Perhaps there might be hope. The Apple WebKit team just sprung up a new contender, which claims not only to merge the pros of grid and masonry into a unified system shorthand but also includes flexbox concepts. Imagine the best of three CSS layout systems in one.<\/p>\n<p>Given these complaints and criticisms &mdash; and a new guy in the game &mdash; the question is:<\/p>\n<blockquote><p>Should CSS Grid expand to handle Masonry, or should a new, dedicated module take over, or should <code>item-flow<\/code> just take the reins?<\/p><\/blockquote>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Meet <strong><a data-instant href=\"https:\/\/www.smashingconf.com\/online-workshops\/\">Smashing Workshops<\/a><\/strong> on <strong>front-end, design &amp; UX<\/strong>, with practical takeaways, live sessions, <strong>video recordings<\/strong> and a friendly Q&amp;A. With Brad Frost, St\u00e9ph Walter and <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\">so many others<\/a>.<\/p>\n<p><a data-instant href=\"smashing-workshops\" class=\"btn btn--green btn--large\">Jump to the workshops&nbsp;\u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"smashing-workshops\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img decoding=\"async\" loading=\"lazy\" class=\"feature-panel-image-img\" src=\"\/images\/smashing-cat\/cat-scubadiving-panel.svg\" alt=\"Feature Panel\" width=\"257\" height=\"355\" \/><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"the-state-of-masonry-in-css-today\">The State Of Masonry In CSS Today<\/h2>\n<p>Several developers have attempted to create workarounds to achieve a masonry layout in their web applications using CSS Grid with manual row-span hacks, CSS Columns, and JavaScript libraries. Without native masonry, developers often turn to Grid hacks like this: a <code>grid-auto-rows<\/code> trick paired with JavaScript to fake the flow. It works &mdash; sort of &mdash; but the cracks show fast.<\/p>\n<p>For instance, the example below relies on JavaScript to measure each item\u2019s height after rendering, calculate the number of 10px rows (plus gaps) the item should span while setting <code>grid-row-end<\/code> dynamically, and use event listeners to adjust the layout upon page load and window resize.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-html\">\/&#042; HTML &#042;\/\n&lt;div class=\"masonry-grid\"&gt;\n  &lt;div class=\"masonry-item\"&gt;&lt;img src=\"image1.jpg\" alt=\"Image 1\"&gt;&lt;\/div&gt;\n  &lt;div class=\"masonry-item\"&gt;&lt;p&gt;Short text content here.&lt;\/p&gt;&lt;\/div&gt;\n  &lt;div class=\"masonry-item\"&gt;&lt;img src=\"image2.jpg\" alt=\"Image 2\"&gt;&lt;\/div&gt;\n  &lt;div class=\"masonry-item\"&gt;&lt;p&gt;Longer text content that spans multiple lines to show height variation.&lt;\/p&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<\/div>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">\/&#042; CSS &#042;\/\n.masonry-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); \/&#042; Responsive columns &#042;\/\n  grid-auto-rows: 10px; \/&#042; Small row height for precise spanning &#042;\/\n  grid-auto-flow: column; \/&#042; Fills columns left-to-right &#042;\/\n  gap: 10px; \/&#042; Spacing between items &#042;\/\n}\n\n.masonry-item {\n  \/&#042; Ensure content doesn\u2019t overflow &#042;\/\n  overflow: hidden;\n}\n\n.masonry-item img {\n  width: 100%;\n  height: auto;\n  display: block;\n}\n\n.masonry-item p {\n  margin: 0;\n  padding: 10px;\n}\n<\/code><\/pre>\n<\/div>\n<div class=\"break-out\">\n<pre><code class=\"language-javascript\">\/\/ JavaScript\n\nfunction applyMasonry() {\n  const grid = document.querySelector('.masonry-grid');\n  const items = grid.querySelectorAll('.masonry-item');\n\n  items.forEach(item =&gt; {\n    \/\/ Reset any previous spans\n    item.style.gridRowEnd = 'auto';\n\n    \/\/ Calculate the number of rows to span based on item height\n    const rowHeight = 10; \n    const gap = 10; \n    const itemHeight = item.getBoundingClientRect().height;\n    const rowSpan = Math.ceil((itemHeight + gap) \/ (rowHeight + gap));\n\n    \/\/ Apply the span\n    item.style.gridRowEnd = `span ${rowSpan}`;\n  });\n}\n\n\/\/ Run on load and resize\nwindow.addEventListener('load', applyMasonry);\nwindow.addEventListener('resize', applyMasonry);\n<\/code><\/pre>\n<\/div>\n<p>This Grid hack gets us close to a masonry layout &mdash; items stack, gaps fill, and it looks decent enough. But let\u2019s be real: it\u2019s not there yet. The code sample above, unlike native <code>grid-template-rows: masonry<\/code> (which is experimental and only exists on Firefox Nightly), relies on JavaScript to calculate spans, defeating the \u201cno JavaScript\u201d dream. The JavaScript logic works by recalculating spans on resize or content change. As <a href=\"https:\/\/css-tricks.com\/native-css-masonry-layout-in-css-grid\/\">Chris Coyier<\/a> noted in his critique of similar hacks, this can lead to lag on complex pages.<\/p>\n<p>Also, the logical DOM order might not match the visual flow, a concern <a href=\"https:\/\/www.smashingmagazine.com\/native-css-masonry-layout-css-grid\/\">Rachel Andrew<\/a> raised about masonry layouts generally. Finally, if images load slowly or content shifts (e.g., lazy-loaded media), the spans need recalculation, risking layout jumps. It\u2019s not really the ideal hack; I\u2019m sure you\u2019d agree.<\/p>\n<blockquote class=\"pull-quote\">\n<p>\n    <a class=\"pull-quote__link\" aria-label=\"Share on Twitter\" href=\"https:\/\/twitter.com\/share?text=%0aDevelopers%20need%20a%20smooth%20experience,%20and%20ergonomically%20speaking,%20hacking%20Grid%20with%20scripts%20is%20a%20mental%20juggling%20act.%20It%20forces%20you%20to%20switch%20between%20CSS%20and%20JavaScript%20to%20tweak%20a%20layout.%20A%20native%20solution,%20whether%20Grid-powered%20or%20a%20new%20module,%20has%20to%20nail%20effortless%20responsiveness,%20neat%20rendering,%20and%20a%20workflow%20that%20does%20not%20make%20you%20break%20your%20tools.%0a&amp;url=https:\/\/smashingmagazine.com%2f2025%2f05%2fmasonry-css-should-grid-evolve-stand-aside-new-module%2f\"><\/p>\n<p>Developers need a smooth experience, and ergonomically speaking, hacking Grid with scripts is a mental juggling act. It forces you to switch between CSS and JavaScript to tweak a layout. A native solution, whether Grid-powered or a new module, has to nail effortless responsiveness, neat rendering, and a workflow that does not make you break your tools.<\/p>\n<p>    <\/a>\n  <\/p>\n<div class=\"pull-quote__quotation\">\n<div class=\"pull-quote__bg\">\n      <span class=\"pull-quote__symbol\">\u201c<\/span><\/div>\n<\/p><\/div>\n<\/blockquote>\n<p>That\u2019s why this debate matters &mdash; our daily grind demands it.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"option-1-extending-css-grid-for-masonry\">Option 1: Extending CSS Grid For Masonry<\/h2>\n<p>One way forward is to strengthen the CSS Grid with masonry powers. As of this writing, CSS grids have been extended to accommodate masonry. <code>grid-template-rows: masonry<\/code> is a draft of CSS Grid Level 3 that is currently experimental in Firefox Nightly. The columns of this layout will remain as a grid axis while the row takes on masonry. The child elements are then laid out item by item along the rows, as with the grid layout\u2019s automatic placement. With this layout, items flow vertically, respecting column tracks but not row constraints.<\/p>\n<p>This option leaves Grid as your go-to layout system but allows it to handle the flowing, gap-filling stacks we crave.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">.masonry-grid {\n  display: grid;\n  gap: 10px;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  grid-template-rows: masonry;\n}\n<\/code><\/pre>\n<\/div>\n<p>First off, the grid-masonry style builds on CSS Grid\u2019s familiarity and robust tooling (e.g., DevTools support). As a front-end developer, there\u2019s a chance you\u2019ve played with <code>grid-template-columns<\/code> or <code>grid-area<\/code>, so you\u2019re halfway up the learning matrix. Masonry only extends the existing capabilities, eliminating the need to learn a whole new syntax from scratch. Also, Grid\u2019s robust tooling comes along with Chrome DevTools\u2019 grid overlay or Firefox\u2019s layout inspector, removing the need for JavaScript hacks.<\/p>\n<p>Not so fast: there are limitations. Grid\u2019s specifications already include properties like <code>align-content<\/code> and <code>grid-auto-flow<\/code>. Stacking masonry on the list risks turning it into a labyrinth.<\/p>\n<p>Then there are <strong>the edge cases<\/strong>. What happens when you want an item to span multiple columns and flow masonry-style? Or when gaps between items don\u2019t align across columns? The specs are still foggy here, and early tests hint at bugs like items jumping unpredictably if content loads dynamically. This issue could break layouts, especially on responsive designs. <strong>The browser compatibility issue<\/strong> also exists. It\u2019s still experimental, and even with polyfills, it does not work on other browsers except Firefox Nightly. Not something you\u2019d want to try in your next client\u2019s project, right?<\/p>\n<h2 id=\"option-2-a-standalone-masonry-module\">Option 2: A Standalone Masonry Module<\/h2>\n<p>What if we had a <code>display: masonry<\/code> approach instead? Indulge me for a few minutes. This isn\u2019t just wishful thinking. Early CSS Working Group chats have floated the idea, and it\u2019s worth picturing how it could improve layouts. Let\u2019s dive into the vision, <em>how<\/em> it might work, and <em>what<\/em> it gains or loses in the process.<\/p>\n<p>Imagine a layout system that doesn\u2019t lean on Grid\u2019s rigid tracks or Flexbox\u2019s linear flow but instead thrives on vertical stacking with a horizontal twist. The goal? A clean slate for masonry\u2019s signature look: items cascading down columns, filling gaps naturally, no hacks required. Inspired by murmurs in CSSWG discussions and the Chrome team\u2019s alternative proposal, this module would <strong>prioritise fluidity over structure<\/strong>, giving designers a tool that feels as intuitive as the layouts they\u2019re chasing. Think Pinterest but without JavaScript scaffolding.<\/p>\n<p>Here\u2019s the pitch: a <code>display<\/code> value named <code>masonry<\/code> kicks off a flow-based system where items stack vertically by default, adjusting horizontally to fit the container. You\u2019d control the direction and spacing with simple properties like the following:<\/p>\n<pre><code class=\"language-css\">.masonry {\n  display: masonry;\n  masonry-direction: column;\n  gap: 1rem;\n}\n<\/code><\/pre>\n<p>Want more control? Hypothetical extras like <code>masonry-columns: auto<\/code> could mimic Grid\u2019s <code>repeat(auto-fill, minmax())<\/code>, while <code>masonry-align: balance<\/code> might even out column lengths for a polished look. It\u2019s less about precise placement (Grid\u2019s strength) and more about letting content breathe and flow, adapting to whatever screen size is thrown at it. The big win here is a clean break from Grid\u2019s rigid order. A standalone module keeps them distinct: <strong>Grid for order, Masonry for flow<\/strong>. No more wrestling with Grid properties that don\u2019t quite fit; you get a system tailored to the job.<\/p>\n<p>Of course, it\u2019s not all smooth sailing. A brand-new spec means starting from zero. Browser vendors would need to rally behind it, which can be slow. Also, it might lead to <strong>confusion of choice<\/strong>, with developers asking questions like: <em>\u201cDo I use Grid or Masonry for this gallery?\u201d<\/em> But hear me out: This proposed module might muddy the waters before it clears them, but after the water is clear, it\u2019s safe for use by all and sundry.<\/p>\n<h2 id=\"item-flow-a-unified-layout-resolution\">Item Flow: A Unified Layout Resolution<\/h2>\n<p>In March 2025, <a href=\"https:\/\/webkit.org\/blog\/16587\/item-flow-part-1-a-new-unified-concept-for-layout\/\">Apple\u2019s WebKit team proposed Item Flow<\/a>, a new system that unifies concepts from Flexbox, Grid, and masonry into a single set of properties. Rather than choosing between enhancing Grid or creating a new masonry module, Item Flow merges their strengths, replacing <code>flex-flow<\/code> and <code>grid-auto-flow<\/code> with a shorthand called <code>item-flow<\/code>. This system introduces four longhand properties:<\/p>\n<ul>\n<li><code>item-direction<\/code><br \/>\nControls flow direction (e.g., <code>row<\/code>, <code>column<\/code>, <code>row-reverse<\/code>).<\/li>\n<li><code>item-wrap<\/code><br \/>\nManages wrapping behaviour (e.g., <code>wrap<\/code>, <code>nowrap<\/code>, <code>wrap-reverse<\/code>).<\/li>\n<li><code>item-pack<\/code><br \/>\nDetermines packing density (e.g., <code>sparse<\/code>, <code>dense<\/code>, <code>balance<\/code>).<\/li>\n<li><code>item-slack<\/code><br \/>\nAdjusts tolerance for layout adjustments, allowing items to shrink or shift to fit.<\/li>\n<\/ul>\n<p>Item Flow aims to make masonry a natural outcome of these properties, not a separate feature. For example, a masonry layout could be achieved with:<\/p>\n<pre><code class=\"language-css\">.container {\n  display: grid; \/&#042; or flex &#042;\/\n  item-flow: column wrap dense;\n\n  \/&#042; long hand version &#042;\/\n  item-direction: column;\n  item-wrap: wrap;\n  item-pack: dense;\n\n  gap: 1rem;\n}\n<\/code><\/pre>\n<p>This setup allows items to flow vertically, wrap into columns, and pack tightly, mimicking masonry\u2019s organic arrangement. The dense packing option, inspired by Grid\u2019s <code>auto-flow: dense<\/code>, reorders items to minimise gaps, while <code>item-slack<\/code> could fine-tune spacing for visual balance.<\/p>\n<p>Item Flow\u2019s promise lies in its <strong>wide use case<\/strong>. It enhances Grid and Flexbox with features like <code>nowrap<\/code> for Grid or <code>balance<\/code> packing for Flexbox, addressing long-standing developer wishlists. However, the proposal is still in discussion, and <a href=\"https:\/\/grok.com\/chat\/caeffa67-49d2-478e-834d-611d9a7bf204\">properties like <code>item-slack<\/code> face naming debates due to clarity issues for non-native English speakers<\/a>.<\/p>\n<p>The downside? Item Flow is a <strong>future-facing concept<\/strong>, and it has not yet been implemented in browsers as of April 2025. Developers must wait for standardisation and adoption, and the CSS Working Group is still gathering feedback.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"what-s-the-right-path\">What\u2019s The Right Path?<\/h2>\n<p>While there is no direct answer to that question, the masonry debate hinges on balancing simplicity, performance, and flexibility. Extending the Grid with masonry is tempting but risks <strong>overcomplicating<\/strong> an already robust system. A standalone <code>display: masonry<\/code> module offers clarity but <strong>adds to CSS\u2019s learning curve.<\/strong> Item Flow, the newest contender, proposes a unified system that could make masonry a natural extension of Grid and Flexbox, potentially putting the debate to rest at last.<\/p>\n<p>Each approach has trade-offs:<\/p>\n<ul>\n<li><strong>Grid with Masonry<\/strong>: Familiar but potentially clunky, with accessibility and spec concerns.<\/li>\n<li><strong>New Module<\/strong>: Clean and purpose-built, but requires learning new syntax.<\/li>\n<li><strong>Item Flow<\/strong>: Elegant and versatile but not yet available, with ongoing debates over naming and implementation.<\/li>\n<\/ul>\n<p>Item Flow\u2019s ability to enhance existing layouts while supporting masonry makes it a compelling option, but its success depends on browser adoption and community support.<\/p>\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>So, where do we land after all this? The masonry showdown boils down to three paths: the extension of masonry into CSS Grid, a standalone module for masonry, or Item Flow. Now, the question is, <strong>will CSS finally free us from JavaScript for masonry<\/strong>, or are we still dreaming?<\/p>\n<p>Grid\u2019s teasing us with a taste, and a standalone module\u2019s whispering promises &mdash; but the finish line\u2019s unclear, and WebKit swoops in with a killer merge shorthand, Item Flow. Browser buy-in, community push, and a few more spec revisions might tell us. For now, it\u2019s your move &mdash; test, tweak, and weigh in. The answer\u2019s coming, one layout at a time.<\/p>\n<h3 id=\"references\">References<\/h3>\n<ul>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/native-css-masonry-layout-css-grid\/\">Native CSS Masonry Layout in CSS Grid<\/a>\u201d by Rachel Andrew<\/li>\n<li>\u201c<a href=\"https:\/\/ishadeed.com\/article\/css-grid-masonry\/\">Should Masonry be part of CSS Grid?<\/a>\u201d by Ahmad Shadeed<\/li>\n<li>\u201c<a href=\"https:\/\/css-tricks.com\/css-masonry-css-grid\/\">CSS Masonry &amp; CSS Grid<\/a>\u201d by Geoff Graham<\/li>\n<li>\u201c<a href=\"https:\/\/css-irl.info\/masonry-in-css\/\">Masonry? In CSS?!<\/a>\u201d by Michelle Barker<\/li>\n<li>\u201c<a href=\"https:\/\/css-tricks.com\/native-css-masonry-layout-in-css-grid\/\">Native CSS Masonry Layout in CSS Grids<\/a>\u201d by Chris Coyier<\/li>\n<li>\u201c<a href=\"https:\/\/webkit.org\/blog\/16587\/item-flow-part-1-a-new-unified-concept-for-layout\/\">Item Flow Part 1: A Unified Concept for Layout<\/a>\u201d by WebKit<\/li>\n<\/ul>\n<div class=\"signature\">\n  <img decoding=\"async\" src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" \/><br \/>\n  <span>(gg, yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Masonry\u00a0In CSS: Should Grid Evolve Or Stand Aside\u00a0For\u00a0A\u00a0New Module? Masonry\u00a0In CSS: Should Grid Evolve Or Stand Aside\u00a0For\u00a0A\u00a0New Module? Gabriel Shoyombo 2025-05-06T13:00:00+00:00 2025-05-07T20:02:52+00:00 You\u2019ve got a Pinterest-style layout to build, but<\/p>\n<p class=\"more-link\"><a href=\"http:\/\/sobre-portugal.com\/index.php\/2025\/05\/06\/masonry-in-css-should-grid-evolve-or-stand-aside-for-a-new-module\/\" class=\"readmore\">Continue reading<svg class=\"icon icon-arrow-right\" aria-hidden=\"true\" role=\"img\"> <use href=\"#icon-arrow-right\" xlink:href=\"#icon-arrow-right\"><\/use> <\/svg><span class=\"screen-reader-text\">Masonry\u00a0In CSS: Should Grid Evolve Or Stand Aside\u00a0For\u00a0A\u00a0New Module?<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-1087","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/posts\/1087","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/comments?post=1087"}],"version-history":[{"count":1,"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/posts\/1087\/revisions"}],"predecessor-version":[{"id":1088,"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/posts\/1087\/revisions\/1088"}],"wp:attachment":[{"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/media?parent=1087"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/categories?post=1087"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/sobre-portugal.com\/index.php\/wp-json\/wp\/v2\/tags?post=1087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}