New CSS Gap Decoration Features
Now you can easily style gaps in grid and flexbox layouts in Chrome and Edge
1Introduction to CSS Gap Decorations
Web developers have long used border and pseudo-element hacks to style gaps in grid and flexbox layouts. With version 149 of Chrome and Edge, CSS gap decorations feature is now fully supported. This new feature makes it much easier and more controlled to style gaps. Microsoft's Edge web platform team led both the design and standardization of this feature.
2Core Features and Innovations
Gap decorations extend the existing column-rule CSS property, making it work in grid and flexbox layouts too. The newly added row-rule property allows decorations to be displayed in both axes. The syntax has been expanded to provide much more control over decorations. Based on feedback from early testing, property names were made clearer and new properties were added.
3Browser Support
Gap decorations are currently available in Chrome and Edge versions 149 and above. Other Chromium-based browsers with matching version numbers also support this feature. Other browser engines are showing positive interest in standards forums, so interoperability across all browsers is expected over time. While the feature currently works only in Chromium-based browsers, wider support is anticipated in the future.
4Practical Implementation Example
In a personal site example, the body element can be set as grid with 4rem gap, creating dividers between sections using row-rule. The navigation area can be organized with flexbox layout adding vertical lines with column-rule. Using repeat(auto) automatically creates dividers for dynamic numbers of sections. Within .home class elements, the rule shorthand can define both row and column rules in a single line.
5Advanced Decoration Controls in Flexbox
In flexbox layouts, using column-rule-inset: overlap-join ensures vertical rules meet row rules. This makes rules connect at intersections while keeping outer ends aligned. By default, column rules work at full height of each flex line. With 3rem gap between flex lines, this property enables column rules to meet the row rule.
6Special Case Management in Grid
In the blog section, grid can be used to make some posts span multiple columns or rows. The .posts element set as grid can add both vertical and horizontal lines with rule: 2px solid #999. To remove lines appearing next to empty grid cells, rule-visibility-items: around can be used. This value ensures gap decorations are only painted when at least one side of the gap has content.
7Advantages of New Rule Shorthand
The new rule shorthand property allows defining both row-rule and column-rule in a single line when they share the same value. This syntax convenience improves code readability, especially in complex layouts. For example, .home { rule: 2px solid #999; } replaces two lines like .home { row-rule: 2px solid #999; column-rule: 2px solid #999; }. This shortcut is particularly effective in reducing style file sizes in large projects.
8New Possibilities in Web Design
CSS gap decorations feature provides significant flexibility in modern web design. The ability to style gaps in modern layout systems like grid and flexbox makes creating cleaner, more controlled interfaces easier. This method, offered as an alternative to border hacks especially in complex layouts, simplifies code maintenance. Microsoft's efforts to standardize this feature contribute to the continuous evolution of the web platform.
Original article: CSS-Tricks (feeds.feedburner.com) — CSS'de Yeni Boşluk Dekorasyon Özellikleri