Four years ago, I wrote an article titled “Minding the ‘gap’,” discussing the CSS `gap` property, its applications, and its functionality with various CSS layouts.

Back then, I explained how simple it was to evenly space items in flex, grid, or multi-column layouts using the `gap` property. However, I noted that styling the gap areas was more challenging and shared a workaround.

Workarounds like using extra HTML elements, pseudo-elements, or borders to draw separator lines often come with drawbacks, such as affecting layout size, interfering with assistive technologies, or cluttering markup with style-only elements.

Today, I’m revisiting layout gaps to introduce a new and exciting CSS feature that will change everything. What required workarounds before can now be achieved with a few simple CSS properties, making it easy and flexible to display styled separators between layout items.

There’s already a specification draft for this feature, available in Chrome and Edge 139 behind a flag. I believe it won’t be long before it’s enabled by default, and other browsers are also receptive and engaged.

Decorative lines between layout items can significantly enhance structure and help users understand the organization of different page regions.

Introducing CSS gap decorations:

If you’ve used a multi-column layout with the `column-width` property, you might be familiar with gap decorations. You can draw vertical lines between columns using the `column-rule` property:

“`css
article {
column-width: 20rem;
column-rule: 1px solid black;
}
“`

This feature builds on this to provide a comprehensive system for drawing separator lines in other layout types. The draft specification states that the `column-rule` property also works in flexbox and grid layouts:

“`css
.my-grid-container {
display: grid;
gap: 2px;
column-rule: 2px solid pink;
}
“`

No need for extra elements or borders! The decoration happens in CSS only, with no impact on semantic markup.

The CSS gap decorations feature introduces a new `row-rule` property for drawing lines between rows:

“`css
.my-flex-container {
display: flex;
gap: 10px;
row-rule: 10px dotted limegreen;
column-rule: 5px dashed coral;
}
“`

Additionally, the syntax allows defining multiple, comma-separated line style values and using the `repeat()` function, enabling different styles of line decorations in a single layout:

“`css
.my-container {
display: grid;
gap: 2px;
row-rule:
repeat(2, 1px dashed red),
2px solid black,
repeat(auto, 1px dotted green);
}
“`

Finally, the feature includes additional CSS properties like `row-rule-break`, `column-rule-break`, `row-rule-outset`, `column-rule-outset`, and `gap-rule-paint-order`, allowing precise customization of separators.

This works across grid, flexbox, multi-column, and soon, masonry!

Browser support:

Currently, the feature is only available in Chromium-based browsers. It’s still early in development, so there’s time to try it and provide feedback.

To try the feature today, use Edge or Chrome version 139 or another Chromium-based browser, and enable the flag by following these steps:

1. In Chrome or Edge, go to `about://flags`.
2. Search for “Enable Experimental Web Platform Features.”
3. Enable the flag.
4. Restart the browser.

To practice, let’s walk through an example using the new CSS gap decorations feature. A final example is available for demo.

Using CSS gap decorations:

Let’s build a simple web page to learn how to use the feature. Here is what we’ll be building:

The layout contains a header with a title, a navigation menu, a main section with text and photos, and a footer.

We’ll use the following markup:

“`html

My personal site

…

…

…

…

…

---

Discover more from WIREDGORILLA

Subscribe to get the latest posts sent to your email.

Type your email…

Subscribe