{"id":10210,"date":"2026-06-24T13:30:25","date_gmt":"2026-06-24T18:30:25","guid":{"rendered":"https:\/\/master.dev\/blog\/?p=10210"},"modified":"2026-06-24T14:16:50","modified_gmt":"2026-06-24T19:16:50","slug":"lets-play-with-gap-decorations","status":"publish","type":"post","link":"https:\/\/master.dev\/blog\/lets-play-with-gap-decorations\/","title":{"rendered":"Let\u2019s Play With Gap Decorations!"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Let&#8217;s take a look at a quite new CSS feature: <a href=\"https:\/\/drafts.csswg.org\/css-gaps-1\/\">Gap Decorations<\/a>. As its name suggests, it allows us to decorate gaps across different layout types (e.g., flexbox, grid, and multi-column). With a few lines of code, you can easily add decorative lines between elements.<\/p>\n\n\n\n<p class=\"learn-more wp-block-paragraph\">At the time of writing, only Chrome and Edge fully <a href=\"https:\/\/caniuse.com\/wf-gap-decorations\">support the features<\/a> we will be using.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Take a classic grid of items and add the following CSS:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.grid<\/span> {\n  <span class=\"hljs-comment\">\/* basic grid setup... + *\/<\/span>\n  <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">20px<\/span>;\n  <span class=\"hljs-attribute\">rule<\/span>: <span class=\"hljs-number\">4px<\/span> solid darkred;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_XJppzXe\/b7cb45a887cc0d4c4d8b0f5e07df85d7\" src=\"\/\/codepen.io\/anon\/embed\/XJppzXe\/b7cb45a887cc0d4c4d8b0f5e07df85d7?height=550&amp;theme-id=1&amp;slug-hash=XJppzXe\/b7cb45a887cc0d4c4d8b0f5e07df85d7&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed XJppzXe\/b7cb45a887cc0d4c4d8b0f5e07df85d7\" title=\"CodePen Embed XJppzXe\/b7cb45a887cc0d4c4d8b0f5e07df85d7\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Within the gaps, we have solid lines with a <code>4px<\/code> thickness. A similar syntax to the <code>border<\/code> property.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s try with flexbox configuration and the following CSS:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.ul<\/span> {\n  <span class=\"hljs-comment\">\/* basic flexbox setup... + *\/<\/span>\n  <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">5px<\/span> <span class=\"hljs-number\">1em<\/span>;\n  <span class=\"hljs-attribute\">column-rule<\/span>: <span class=\"hljs-number\">2px<\/span> solid purple;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">This time, I specified the logic for the column only, which gives a line separator between the items.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dPNNZXQ\/2d0c10a675c43883a40e7ee0acc33e49\" src=\"\/\/codepen.io\/anon\/embed\/dPNNZXQ\/2d0c10a675c43883a40e7ee0acc33e49?height=350&amp;theme-id=1&amp;slug-hash=dPNNZXQ\/2d0c10a675c43883a40e7ee0acc33e49&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dPNNZXQ\/2d0c10a675c43883a40e7ee0acc33e49\" title=\"CodePen Embed dPNNZXQ\/2d0c10a675c43883a40e7ee0acc33e49\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">The above is the very basic usage of this new feature, yet we were able to create decorations that would otherwise require complex code.<em> Now, imagine all that we can do if we push this feature to its limit.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this article, I will explore Gap Decorations in my own way, which means the \u201chacky\u201d way! Decorating the gaps with lines is good, but let\u2019s see what other cool stuff we can do.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before we start, I invite you to check this <a href=\"https:\/\/microsoftedge.github.io\/Demos\/css-gap-decorations\/playground.html\">playground<\/a> created by the Microsoft team. It gives you a good overview of the different properties\/values of this feature. There are also a <a href=\"https:\/\/microsoftedge.github.io\/Demos\/css-gap-decorations\/\">bunch of nice demos featuring real-world use cases.<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fancy Underlines<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s start with a simple heading element.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Heading<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">Having the following CSS:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">h1<\/span> {\n  <span class=\"hljs-attribute\">display<\/span>: grid;\n  <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">10px<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">Nothing special will happen. Making the heading a grid container with a gap does nothing visually, as within that grid, we only have one item (the text content).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now let\u2019s add the following:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">h1<\/span> {\n  ...\n  <span class=\"hljs-attribute\">rule<\/span>: <span class=\"hljs-number\">5px<\/span> solid blue;\n}\n<span class=\"hljs-selector-tag\">h1<\/span><span class=\"hljs-selector-pseudo\">::after<\/span> {\n  <span class=\"hljs-attribute\">content<\/span>: <span class=\"hljs-string\">\"\"<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">Quite a strange code, but think a moment about it. What will it produce?<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dPNNZZr\/765e9bcd62e7afb030c68bdcce448321\" src=\"\/\/codepen.io\/anon\/embed\/dPNNZZr\/765e9bcd62e7afb030c68bdcce448321?height=350&amp;theme-id=1&amp;slug-hash=dPNNZZr\/765e9bcd62e7afb030c68bdcce448321&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dPNNZZr\/765e9bcd62e7afb030c68bdcce448321\" title=\"CodePen Embed dPNNZZr\/765e9bcd62e7afb030c68bdcce448321\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">It adds an underline to the heading. If you still don\u2019t get why it\u2019s doing that, inspect the code of the element, and you will notice that the pseudo-element is a new item inside the grid container placed below the text content. Two items mean a gap between them, and this gap is decorated with the <code>rule<\/code> property!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"461\" height=\"222\" src=\"https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/06\/2agTbOQ4.png?resize=461%2C222&#038;ssl=1\" alt=\"\" class=\"wp-image-10228\" srcset=\"https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/06\/2agTbOQ4.png?w=461&amp;ssl=1 461w, https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/06\/2agTbOQ4.png?resize=300%2C144&amp;ssl=1 300w\" sizes=\"auto, (max-width: 461px) 100vw, 461px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"learn-more wp-block-paragraph\">But that\u2019s doable with a simple <code>border-bottom<\/code> . Why such overengineering?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unlike with <code>border<\/code> we have another property that lets us control the width of that line: <code>rule-inset<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Add the following code:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">rule-inset<\/span>: 1<span class=\"hljs-selector-tag\">em<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ogBBoqV\/35917dff895e71df4504f5b063d96398\" src=\"\/\/codepen.io\/anon\/embed\/ogBBoqV\/35917dff895e71df4504f5b063d96398?height=350&amp;theme-id=1&amp;slug-hash=ogBBoqV\/35917dff895e71df4504f5b063d96398&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ogBBoqV\/35917dff895e71df4504f5b063d96398\" title=\"CodePen Embed ogBBoqV\/35917dff895e71df4504f5b063d96398\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">We reduced the size of the line by <code>1em<\/code> from each side to get a partial underline. Let\u2019s try with a negative value instead:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">rule-inset<\/span>: <span class=\"hljs-selector-tag\">-1em<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YPNNEjm\/87cdbf0caf6b093bac0f0c9e36ff5a70\" src=\"\/\/codepen.io\/anon\/embed\/YPNNEjm\/87cdbf0caf6b093bac0f0c9e36ff5a70?height=350&amp;theme-id=1&amp;slug-hash=YPNNEjm\/87cdbf0caf6b093bac0f0c9e36ff5a70&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YPNNEjm\/87cdbf0caf6b093bac0f0c9e36ff5a70\" title=\"CodePen Embed YPNNEjm\/87cdbf0caf6b093bac0f0c9e36ff5a70\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Now, the line extends by <code>1em<\/code> for each side. We can also control each side individually by specifying two values:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">rule-inset<\/span>: <span class=\"hljs-selector-tag\">-1em<\/span> 1<span class=\"hljs-selector-tag\">em<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vEggWVB\/477c64994e3ece5da816544c3aef1a8f\" src=\"\/\/codepen.io\/anon\/embed\/vEggWVB\/477c64994e3ece5da816544c3aef1a8f?height=350&amp;theme-id=1&amp;slug-hash=vEggWVB\/477c64994e3ece5da816544c3aef1a8f&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vEggWVB\/477c64994e3ece5da816544c3aef1a8f\" title=\"CodePen Embed vEggWVB\/477c64994e3ece5da816544c3aef1a8f\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">A lot of possible ways to underline the text with a simple code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The only drawback is that we cannot rely on percentage values to have more control over the line\u2019s width. For example, the following (if valid) would allow me to have a line in the center equal to exactly <code>1em<\/code>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">rule-inset<\/span>: <span class=\"hljs-selector-tag\">calc<\/span>(50% <span class=\"hljs-selector-tag\">-<\/span> <span class=\"hljs-selector-class\">.5em<\/span>);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">The same width but placed on the left instead:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">rule-inset<\/span>: 0 <span class=\"hljs-selector-tag\">calc<\/span>(100% <span class=\"hljs-selector-tag\">-<\/span> 1<span class=\"hljs-selector-tag\">em<\/span>);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">In reality, the above code is technically valid because <code>rule-inset<\/code> accepts percentage values, but they resolve to 0 in most cases. I won&#8217;t bother you with this small quirk, but try to avoid percentages with <code>rule-inset<\/code> as they will rarely do what you want. Meanwhile, we can still create a lot of fancy decorations. Here are more examples for you to explore.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MYJJbYg\/8f1968ef52c2199b31d532248f59a295\" src=\"\/\/codepen.io\/anon\/embed\/MYJJbYg\/8f1968ef52c2199b31d532248f59a295?height=500&amp;theme-id=1&amp;slug-hash=MYJJbYg\/8f1968ef52c2199b31d532248f59a295&amp;default-tab=css,result\" height=\"500\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MYJJbYg\/8f1968ef52c2199b31d532248f59a295\" title=\"CodePen Embed MYJJbYg\/8f1968ef52c2199b31d532248f59a295\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">In the second example, I added another pseudo-element to activate a gap at the top and get another line. A line that I can style differently because I can do the following:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">rule<\/span>: 5<span class=\"hljs-selector-tag\">px<\/span> <span class=\"hljs-selector-tag\">blue<\/span>;\n<span class=\"hljs-selector-tag\">rule-style<\/span>: <span class=\"hljs-selector-tag\">solid<\/span>, <span class=\"hljs-selector-tag\">dashed<\/span>; <span class=\"hljs-comment\">\/* 1st line is solid and 2nd line dahsed *\/<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">Cool, right? You can also define different thicknesses and different colors! We will see more examples later.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Horizontal Line Decoration<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s take the previous configuration, keep both pseudo-elements, and switch to a flexbox configuration:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zxNNoez\/0550930bb5953fc429e8d26cace74667\" src=\"\/\/codepen.io\/anon\/embed\/zxNNoez\/0550930bb5953fc429e8d26cace74667?height=350&amp;theme-id=1&amp;slug-hash=zxNNoez\/0550930bb5953fc429e8d26cace74667&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zxNNoez\/0550930bb5953fc429e8d26cace74667\" title=\"CodePen Embed zxNNoez\/0550930bb5953fc429e8d26cace74667\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">The default configuration is <code>row<\/code>, which means the gap between items is horizontal; hence, we get vertical lines.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s increase the gap and the line thickness.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">gap<\/span>: 120<span class=\"hljs-selector-tag\">px<\/span>;\n<span class=\"hljs-selector-tag\">rule<\/span>: 100<span class=\"hljs-selector-tag\">px<\/span> <span class=\"hljs-selector-tag\">solid<\/span> <span class=\"hljs-selector-tag\">blue<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PwWWEPW\/fe634086b20641daf596d1d24b297170\" src=\"\/\/codepen.io\/anon\/embed\/PwWWEPW\/fe634086b20641daf596d1d24b297170?height=350&amp;theme-id=1&amp;slug-hash=PwWWEPW\/fe634086b20641daf596d1d24b297170&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PwWWEPW\/fe634086b20641daf596d1d24b297170\" title=\"CodePen Embed PwWWEPW\/fe634086b20641daf596d1d24b297170\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Two ugly blocks on each side, but we can reduce their height to simulate horizontal lines:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">rule-inset<\/span>: <span class=\"hljs-selector-tag\">calc<\/span>(<span class=\"hljs-selector-class\">.5lh<\/span> <span class=\"hljs-selector-tag\">-<\/span> 3<span class=\"hljs-selector-tag\">px<\/span>);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">Since I am not able to use percentage, I can rely on the <code>lh<\/code> unit which refers to the height of the line box and since, in this configuration, our content is only text, it\u2019s also the height of the element. If I reduce the height of the decoration by half the line-height minus <code>3px<\/code> from each side, I get a line with <code>6px<\/code> of thickness.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Another cool decoration:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xbggpEo\/1207eb4745e6b914f022e2d637b49c7d\" src=\"\/\/codepen.io\/anon\/embed\/xbggpEo\/1207eb4745e6b914f022e2d637b49c7d?height=350&amp;theme-id=1&amp;slug-hash=xbggpEo\/1207eb4745e6b914f022e2d637b49c7d&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xbggpEo\/1207eb4745e6b914f022e2d637b49c7d\" title=\"CodePen Embed xbggpEo\/1207eb4745e6b914f022e2d637b49c7d\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"learn-more wp-block-paragraph\">Wait, I am lost! Didn\u2019t we use <code>rule-inset<\/code> to control the width in the previous examples?!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This part can be a bit confusing, but don\u2019t forget that we changed the configuration from column (with CSS grid) to row (with Flexbox). When dealing with vertical gaps, we get horizontal lines with a thickness (or height) controlled by the <code>rule<\/code> property (or the <code>rule-width<\/code>) while the <code>rule-inset<\/code> controls the width.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When the gaps are horizontal, the lines become vertical. The thickness becomes a width controlled by <code>rule-width<\/code>, and <code>rule-inset<\/code> controls the height. In the previous example, I created a line with a width equal to <code>100px<\/code> and a height equal to <code>6px<\/code>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">rule<\/span>: 100<span class=\"hljs-selector-tag\">px<\/span> <span class=\"hljs-selector-tag\">solid<\/span> <span class=\"hljs-selector-tag\">blue<\/span>;  <span class=\"hljs-comment\">\/* width defined here *\/<\/span>\n<span class=\"hljs-selector-tag\">rule-inset<\/span>: <span class=\"hljs-selector-tag\">calc<\/span>(<span class=\"hljs-selector-class\">.5lh<\/span> <span class=\"hljs-selector-tag\">-<\/span> 3<span class=\"hljs-selector-tag\">px<\/span>); <span class=\"hljs-comment\">\/* height defined here *\/<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">Don\u2019t worry if you are a bit lost. It\u2019s still a new feature, so it takes time to get used to it. The more you play with it, the clearer it becomes, and we still have many examples to look at.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the previous code, I have also used <code>justify-content: center<\/code> to get the effect correctly, but if we change the alignment, we get something different:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yyggRBW\/37bb10ad503fed426bdcd08e4225cd96\" src=\"\/\/codepen.io\/anon\/embed\/yyggRBW\/37bb10ad503fed426bdcd08e4225cd96?height=350&amp;theme-id=1&amp;slug-hash=yyggRBW\/37bb10ad503fed426bdcd08e4225cd96&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yyggRBW\/37bb10ad503fed426bdcd08e4225cd96\" title=\"CodePen Embed yyggRBW\/37bb10ad503fed426bdcd08e4225cd96\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Here, it\u2019s crucial to understand how gap decoration works to understand why the lines are positioned that way.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We are dealing with a flexbox configuration having 3 flex items (2 pseudo-elements and the text content). We defined a gap of <code>120px<\/code>, <em>but<\/em>, the gap can be bigger depending on the alignment value, and when we define a gap decoration, the line is centered within the gap. To determine the position of the decorative lines, you need to know the size and position of the gap.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s make the pseudo-elements visible to better understand what\u2019s happening:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OPWWBVE\/1a54e0801a7414ebb04cb32d22daf92d\" src=\"\/\/codepen.io\/anon\/embed\/OPWWBVE\/1a54e0801a7414ebb04cb32d22daf92d?height=350&amp;theme-id=1&amp;slug-hash=OPWWBVE\/1a54e0801a7414ebb04cb32d22daf92d&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OPWWBVE\/1a54e0801a7414ebb04cb32d22daf92d\" title=\"CodePen Embed OPWWBVE\/1a54e0801a7414ebb04cb32d22daf92d\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">All the space between the red lines (pseudo-elements) and the text content is a gap, and the blue line is placed in the middle of it. This configuration is interesting because if I had the ability to rely on percentages, I could use the following:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-15\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">rule<\/span>: 100% <span class=\"hljs-selector-tag\">solid<\/span> <span class=\"hljs-selector-tag\">blue<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-15\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">And the line will automatically fill the whole space.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"847\" height=\"236\" src=\"https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/06\/ml-TRlfI.png?resize=847%2C236&#038;ssl=1\" alt=\"\" class=\"wp-image-10229\" srcset=\"https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/06\/ml-TRlfI.png?w=847&amp;ssl=1 847w, https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/06\/ml-TRlfI.png?resize=300%2C84&amp;ssl=1 300w, https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/06\/ml-TRlfI.png?resize=768%2C214&amp;ssl=1 768w\" sizes=\"auto, (max-width: 847px) 100vw, 847px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Unlike <code>rule-inset<\/code>, <code>rule-width<\/code> doesn&#8217;t accept percentage values, so let&#8217;s hope this will be added in the future, as it will unlock many possibilities and some flexibility. Actually, we are obliged to define values for the gap and for the line thickness.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-16\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">gap<\/span>: 15<span class=\"hljs-selector-tag\">px<\/span>;\n<span class=\"hljs-selector-tag\">rule<\/span>: 12<span class=\"hljs-selector-tag\">px<\/span> <span class=\"hljs-selector-tag\">solid<\/span> <span class=\"hljs-selector-tag\">blue<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-16\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">With a percentage value, the <code>rule-width<\/code> value will be relative to the gap, and we can control everything by changing only one value.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-17\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">gap<\/span>: 15<span class=\"hljs-selector-tag\">px<\/span>;\n<span class=\"hljs-selector-tag\">rule<\/span>: 80% <span class=\"hljs-selector-tag\">solid<\/span> <span class=\"hljs-selector-tag\">blue<\/span>; <span class=\"hljs-comment\">\/* 80% of 15px = 12px *\/<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-17\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Background Patterns<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s try something different and play with many lines this time. Take the following code:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-18\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.box<\/span> {\n  <span class=\"hljs-attribute\">position<\/span>: fixed;\n  <span class=\"hljs-attribute\">inset<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">display<\/span>: grid;\n  <span class=\"hljs-attribute\">grid-template<\/span>: \n    <span class=\"hljs-built_in\">repeat<\/span>(auto-fill,minmax(<span class=\"hljs-number\">30px<\/span>,<span class=\"hljs-number\">1<\/span>fr))\/\n    <span class=\"hljs-built_in\">repeat<\/span>(auto-fill,minmax(<span class=\"hljs-number\">30px<\/span>,<span class=\"hljs-number\">1<\/span>fr));\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-18\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">I define a full-screen grid with as many rows and columns as needed (well, the classic <code>auto-fill<\/code> configuration). Now let\u2019s add a gap and a basic decoration:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-19\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">gap<\/span>: 5<span class=\"hljs-selector-tag\">px<\/span>;\n<span class=\"hljs-selector-tag\">rule<\/span>: 2<span class=\"hljs-selector-tag\">px<\/span> <span class=\"hljs-selector-tag\">solid<\/span> <span class=\"hljs-selector-id\">#000<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-19\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wBggQZo\/e53477eef977d09bcca851bb9a25dca1\" src=\"\/\/codepen.io\/anon\/embed\/wBggQZo\/e53477eef977d09bcca851bb9a25dca1?height=450&amp;theme-id=1&amp;slug-hash=wBggQZo\/e53477eef977d09bcca851bb9a25dca1&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wBggQZo\/e53477eef977d09bcca851bb9a25dca1\" title=\"CodePen Embed wBggQZo\/e53477eef977d09bcca851bb9a25dca1\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Every gap is filled with a line, creating a grid-like pattern!<\/p>\n\n\n\n<p class=\"learn-more wp-block-paragraph\">Well, a gradient can do this. What are you doing?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I know, I know \u2014 the cool part is still to come. Let\u2019s update the previous code with the following:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-20\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">rule<\/span>: <span class=\"hljs-selector-tag\">solid<\/span> <span class=\"hljs-selector-id\">#000<\/span>;\n<span class=\"hljs-selector-tag\">rule-width<\/span>: 1<span class=\"hljs-selector-tag\">px<\/span>, 1<span class=\"hljs-selector-tag\">px<\/span>, 3<span class=\"hljs-selector-tag\">px<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-20\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OPWWBZr\/862ec2654ee463df955f11e3f980c55f\" src=\"\/\/codepen.io\/anon\/embed\/OPWWBZr\/862ec2654ee463df955f11e3f980c55f?height=450&amp;theme-id=1&amp;slug-hash=OPWWBZr\/862ec2654ee463df955f11e3f980c55f&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OPWWBZr\/862ec2654ee463df955f11e3f980c55f\" title=\"CodePen Embed OPWWBZr\/862ec2654ee463df955f11e3f980c55f\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">See that? I can set a different thickness for each line, and it will repeat across all the lines. Two lines with <code>1px<\/code> thickness, then one line with <code>3px<\/code> thickness, and so on.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s do the same with the color:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-21\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">rule-style<\/span>: <span class=\"hljs-selector-tag\">solid<\/span>;\n<span class=\"hljs-selector-tag\">rule-color<\/span>: <span class=\"hljs-selector-tag\">red<\/span>, <span class=\"hljs-selector-tag\">red<\/span>, <span class=\"hljs-selector-tag\">blue<\/span>;\n<span class=\"hljs-selector-tag\">rule-width<\/span>: 1<span class=\"hljs-selector-tag\">px<\/span>, 1<span class=\"hljs-selector-tag\">px<\/span>, 3<span class=\"hljs-selector-tag\">px<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-21\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QwddZzW\/126e474315602a4ba50ad973f02c0647\" src=\"\/\/codepen.io\/anon\/embed\/QwddZzW\/126e474315602a4ba50ad973f02c0647?height=450&amp;theme-id=1&amp;slug-hash=QwddZzW\/126e474315602a4ba50ad973f02c0647&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QwddZzW\/126e474315602a4ba50ad973f02c0647\" title=\"CodePen Embed QwddZzW\/126e474315602a4ba50ad973f02c0647\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Repeating the same color and thickness isn&#8217;t ideal, right? No problem, let\u2019s fix that!<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-22\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">rule-color<\/span>: <span class=\"hljs-selector-tag\">repeat<\/span>(2,<span class=\"hljs-selector-tag\">red<\/span>), <span class=\"hljs-selector-tag\">blue<\/span>;\n<span class=\"hljs-selector-tag\">rule-width<\/span>: <span class=\"hljs-selector-tag\">repeat<\/span>(2,1<span class=\"hljs-selector-tag\">px<\/span>), 3<span class=\"hljs-selector-tag\">px<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-22\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">You can use the same <code>repeat()<\/code> function we have in CSS Grid. And while we are at it, let\u2019s make some of the lines dashed instead:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-23\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">rule-style<\/span>: <span class=\"hljs-selector-tag\">repeat<\/span>(5,<span class=\"hljs-selector-tag\">solid<\/span>) <span class=\"hljs-selector-tag\">dashed<\/span>;\n<span class=\"hljs-selector-tag\">rule-color<\/span>: <span class=\"hljs-selector-tag\">repeat<\/span>(2,<span class=\"hljs-selector-tag\">red<\/span>), <span class=\"hljs-selector-tag\">blue<\/span>;\n<span class=\"hljs-selector-tag\">rule-width<\/span>: <span class=\"hljs-selector-tag\">repeat<\/span>(2,1<span class=\"hljs-selector-tag\">px<\/span>), 3<span class=\"hljs-selector-tag\">px<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-23\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wBggYNL\/edb80a5b22597e3012a4b9df93aee78e\" src=\"\/\/codepen.io\/anon\/embed\/wBggYNL\/edb80a5b22597e3012a4b9df93aee78e?height=450&amp;theme-id=1&amp;slug-hash=wBggYNL\/edb80a5b22597e3012a4b9df93aee78e&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wBggYNL\/edb80a5b22597e3012a4b9df93aee78e\" title=\"CodePen Embed wBggYNL\/edb80a5b22597e3012a4b9df93aee78e\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Do you see the potential of this? It\u2019s not the feature I would consider to create patterns, but as you can see, it allows us to create complex ones easily. If you are not comfortable with gradients, you have a new tool to play with.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let me show one more trick with the following code:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-24\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">rule-break<\/span>: <span class=\"hljs-selector-tag\">intersection<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-24\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZYLLqNB\/df36b79e393c42d5013202db018ab89d\" src=\"\/\/codepen.io\/anon\/embed\/ZYLLqNB\/df36b79e393c42d5013202db018ab89d?height=450&amp;theme-id=1&amp;slug-hash=ZYLLqNB\/df36b79e393c42d5013202db018ab89d&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZYLLqNB\/df36b79e393c42d5013202db018ab89d\" title=\"CodePen Embed ZYLLqNB\/df36b79e393c42d5013202db018ab89d\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Previously, all the lines were on top of each other (they intersect), but this behavior can be controlled with the <code>rule-break<\/code> property. I won\u2019t get into fine details of how it works, but I can disable the line intersection by using the <code>intersection<\/code> value (<code>none<\/code> is the default value).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Instead of a single line that spans the whole grid, we have many lines with tiny gaps between them. This also means that using <code>rule-inset<\/code> will apply to each one of those lines.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-25\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">rule-inset<\/span>: 5<span class=\"hljs-selector-tag\">px<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-25\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xbggQgj\/f8fd92ac42f4d00a63df914c70439a39\" src=\"\/\/codepen.io\/anon\/embed\/xbggQgj\/f8fd92ac42f4d00a63df914c70439a39?height=450&amp;theme-id=1&amp;slug-hash=xbggQgj\/f8fd92ac42f4d00a63df914c70439a39&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xbggQgj\/f8fd92ac42f4d00a63df914c70439a39\" title=\"CodePen Embed xbggQgj\/f8fd92ac42f4d00a63df914c70439a39\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">A lot of possible configurations. As <a href=\"https:\/\/css-pattern.com\/\">a CSS Pattern fanatic<\/a>, I really like this part. Tweaking different values to get different patterns is quite satisfying and allows you to better understand how Gap Decorations works.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As a small homework, here are a few more patterns for you to dissect<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_emggQaK\/d46400a9850be817e5b44cad82ab7a5b\" src=\"\/\/codepen.io\/anon\/embed\/emggQaK\/d46400a9850be817e5b44cad82ab7a5b?height=450&amp;theme-id=1&amp;slug-hash=emggQaK\/d46400a9850be817e5b44cad82ab7a5b&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed emggQaK\/d46400a9850be817e5b44cad82ab7a5b\" title=\"CodePen Embed emggQaK\/d46400a9850be817e5b44cad82ab7a5b\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JoEEgpj\/994176689899e1331ffd5cb300f44ea6\" src=\"\/\/codepen.io\/anon\/embed\/JoEEgpj\/994176689899e1331ffd5cb300f44ea6?height=450&amp;theme-id=1&amp;slug-hash=JoEEgpj\/994176689899e1331ffd5cb300f44ea6&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JoEEgpj\/994176689899e1331ffd5cb300f44ea6\" title=\"CodePen Embed JoEEgpj\/994176689899e1331ffd5cb300f44ea6\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_Ggrrwbo\/9cb47a450312d5d79dfd0b5f1a0661ce\" src=\"\/\/codepen.io\/anon\/embed\/Ggrrwbo\/9cb47a450312d5d79dfd0b5f1a0661ce?height=450&amp;theme-id=1&amp;slug-hash=Ggrrwbo\/9cb47a450312d5d79dfd0b5f1a0661ce&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed Ggrrwbo\/9cb47a450312d5d79dfd0b5f1a0661ce\" title=\"CodePen Embed Ggrrwbo\/9cb47a450312d5d79dfd0b5f1a0661ce\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_rajydym\/50508897536832d4caba2af5ce6f69bd\" src=\"\/\/codepen.io\/anon\/embed\/rajydym\/50508897536832d4caba2af5ce6f69bd?height=450&amp;theme-id=1&amp;slug-hash=rajydym\/50508897536832d4caba2af5ce6f69bd&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rajydym\/50508897536832d4caba2af5ce6f69bd\" title=\"CodePen Embed rajydym\/50508897536832d4caba2af5ce6f69bd\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Don\u2019t be surprised by the dots pattern. Don\u2019t forget that <code>rule<\/code> is similar to <code>border<\/code>, and we have the <code>dotted<\/code> style. A style I will use right away in the next example.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Responsive List Separator<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s take one of the first examples I shared in the article. The one with a line separator between items:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dPNNZXQ\/2d0c10a675c43883a40e7ee0acc33e49\" src=\"\/\/codepen.io\/anon\/embed\/dPNNZXQ\/2d0c10a675c43883a40e7ee0acc33e49?height=350&amp;theme-id=1&amp;slug-hash=dPNNZXQ\/2d0c10a675c43883a40e7ee0acc33e49&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dPNNZXQ\/2d0c10a675c43883a40e7ee0acc33e49\" title=\"CodePen Embed dPNNZXQ\/2d0c10a675c43883a40e7ee0acc33e49\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s one of the basic uses of gap decoration. We get a line separator, but only between two adjacent items, never at the beginning or the end of a row. That\u2019s the responsive behavior, and without gap decoration, we had to rely on hacks to achieve it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now what if we want the lines to be horizontal? Think for a moment about how we can do it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We already did a similar thing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You got it?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I hope so. Here is the code:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-26\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">column-rule<\/span>: <span class=\"hljs-selector-class\">.75em<\/span> <span class=\"hljs-selector-tag\">solid<\/span> <span class=\"hljs-selector-tag\">purple<\/span>;\n<span class=\"hljs-selector-tag\">rule-inset<\/span>: <span class=\"hljs-selector-tag\">calc<\/span>(<span class=\"hljs-selector-class\">.5lh<\/span> <span class=\"hljs-selector-tag\">-<\/span> 2<span class=\"hljs-selector-tag\">px<\/span>);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-26\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">I make the width bigger (<code>.75em<\/code> in this case), and I use <code>rule-inset<\/code> combined with <code>lh<\/code> to specify the height (<code>4px<\/code> in this case)<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_myRRaJV\/0a43af0cac5e4575ceef36ba708f75e2\" src=\"\/\/codepen.io\/anon\/embed\/myRRaJV\/0a43af0cac5e4575ceef36ba708f75e2?height=350&amp;theme-id=1&amp;slug-hash=myRRaJV\/0a43af0cac5e4575ceef36ba708f75e2&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed myRRaJV\/0a43af0cac5e4575ceef36ba708f75e2\" title=\"CodePen Embed myRRaJV\/0a43af0cac5e4575ceef36ba708f75e2\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Now let\u2019s adjust the style and make it dotted:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_LExxMpw\/1c9bebaef854e76be299542baffa00d7\" src=\"\/\/codepen.io\/anon\/embed\/LExxMpw\/1c9bebaef854e76be299542baffa00d7?height=350&amp;theme-id=1&amp;slug-hash=LExxMpw\/1c9bebaef854e76be299542baffa00d7&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LExxMpw\/1c9bebaef854e76be299542baffa00d7\" title=\"CodePen Embed LExxMpw\/1c9bebaef854e76be299542baffa00d7\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">I specified <code>rule: 8px dotted<\/code>, and the browser draws a dotted line with 3 dots. It could have been more or less, depending on many factors. If, for example, I make the <code>font-size<\/code> bigger, the line will have more space, and we get more dots.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RNKKEar\/46ef7403f580308027b48bc14e88d265\" src=\"\/\/codepen.io\/anon\/embed\/RNKKEar\/46ef7403f580308027b48bc14e88d265?height=400&amp;theme-id=1&amp;slug-hash=RNKKEar\/46ef7403f580308027b48bc14e88d265&amp;default-tab=result\" height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RNKKEar\/46ef7403f580308027b48bc14e88d265\" title=\"CodePen Embed RNKKEar\/46ef7403f580308027b48bc14e88d265\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Now the question is: how to force the browser to draw only one dot? Is this even possible?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Yes, it\u2019s possible. To have only one dot, we need to ensure that the space reserved for the decoration can contain only one dot. In other words, that space needs to be a square.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the previous example, we used <code>8px<\/code> as the line thickness, which is also the dot diameter. To make sure we have only one dot, the line height needs to be equal to <code>8px<\/code> as well, and we know how to do that!<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-27\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">rule-inset<\/span>: <span class=\"hljs-selector-tag\">calc<\/span>(<span class=\"hljs-selector-class\">.5lh<\/span> <span class=\"hljs-selector-tag\">-<\/span> 4<span class=\"hljs-selector-tag\">px<\/span>);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-27\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jEyyXrZ\/a5031498111dafba1c156ce84f9f8cc3\" src=\"\/\/codepen.io\/anon\/embed\/jEyyXrZ\/a5031498111dafba1c156ce84f9f8cc3?height=350&amp;theme-id=1&amp;slug-hash=jEyyXrZ\/a5031498111dafba1c156ce84f9f8cc3&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jEyyXrZ\/a5031498111dafba1c156ce84f9f8cc3\" title=\"CodePen Embed jEyyXrZ\/a5031498111dafba1c156ce84f9f8cc3\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Tada! We have a dot separator!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s add a size variable to make things easier to adjust:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-28\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">ul<\/span> {\n  <span class=\"hljs-attribute\">--s<\/span>: .<span class=\"hljs-number\">5em<\/span>; <span class=\"hljs-comment\">\/* the dot size *\/<\/span>\n\n  <span class=\"hljs-attribute\">column-rule<\/span>: <span class=\"hljs-built_in\">var<\/span>(--s) dotted purple;\n  <span class=\"hljs-attribute\">rule-inset<\/span>: <span class=\"hljs-built_in\">calc<\/span>(<span class=\"hljs-number\">0.5<\/span>lh - var(--s)\/<span class=\"hljs-number\">2<\/span>);\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-28\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ogBBLLQ\/8444a36ad54ed85d7fd76ce0c458753e\" src=\"\/\/codepen.io\/anon\/embed\/ogBBLLQ\/8444a36ad54ed85d7fd76ce0c458753e?height=350&amp;theme-id=1&amp;slug-hash=ogBBLLQ\/8444a36ad54ed85d7fd76ce0c458753e&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ogBBLLQ\/8444a36ad54ed85d7fd76ce0c458753e\" title=\"CodePen Embed ogBBLLQ\/8444a36ad54ed85d7fd76ce0c458753e\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">If you didn\u2019t understand how I made the checkboard or the dots pattern, now you have a strong hint.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wasn&#8217;t it cool to hack with Gap Decorations?!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I know that most of the stuff we saw can be done using common, well-supported features such as gradients, pseudo-elements, border-image, etc. I am not proposing a replacement for the known solutions. It was more of a fun exercise in practicing Gap Decoration.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thinking outside the box and coming up with fancy ideas is, for me, the best way to explore a new feature. Understanding the basics is good, but hacking with it to find other use cases is even better. And who knows, maybe some of my ideas will become common tricks that everyone will use in the future.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The `rule` (and friends) CSS property allows us to draw markers (like borders) in the gaps between columns and rows (and flex items!)<\/p>\n","protected":false},"author":12,"featured_media":10216,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_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_post_was_ever_published":false},"categories":[1],"tags":[7,153,362,499],"class_list":["post-10210","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-css","tag-gap","tag-gap-decorations","tag-rule"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/06\/gap-decorations.jpg?fit=2000%2C1200&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts\/10210","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/comments?post=10210"}],"version-history":[{"count":9,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts\/10210\/revisions"}],"predecessor-version":[{"id":10236,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts\/10210\/revisions\/10236"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/media\/10216"}],"wp:attachment":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/media?parent=10210"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/categories?post=10210"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/tags?post=10210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}