CSS Gap Decorations Are Now Available for Finer Grid and Flexbox Control

In early August 2026, CSS-Tricks confirmed that CSS gap decorations are now fully supported in Chrome and Edge 149. This is another "remove the JS patch" milestone for layout: divider lines that previously required extra DOM elements or pseudo-elements can now be declared in pure CSS.

What gap decorations are

In grid or flexbox layouts, gap defines the space between items. Gap decorations let you draw lines and styles directly into those gaps, similar to how column-rule works in multi-column layouts. The column-rule and row-rule properties control column-gap and row-gap lines respectively:

.grid-container {
  display: grid;
  gap: 20px;
  column-rule: 2px solid red;
  row-rule: 1px dashed gray;
}

Previously, "a divider between every two columns" card layouts required a pile of border pseudo-classes or real separator elements. Now a single property handles it, and the line stays naturally aligned with the gap — when items wrap, the dividers reposition correctly too.

A practical pricing-table example

Take the classic "three-tier pricing card" layout. In the past, drawing a vertical line between columns meant adding a border-left to every card and then dealing with removing it on the first column. Now you simply write:

.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  column-rule: 1px solid #e5e7eb;
}

Notice the gap is set to 0 while column-rule controls the divider width independently; row separators work the same way with row-rule. When a breakpoint shifts the layout from three columns to two, the dividers reflow with the columns automatically — no more "remove the extra border" patches inside media queries.

It works in flexbox too

Gap decorations are not limited to grid. Vertical navs and horizontally scrolling card lists can declare lines on row-gap or column-gap just as easily. For a "feature list" where you want a subtle divider between every two rows:

.feature-list {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  row-rule: 1px solid rgba(0, 0, 0, 0.08);
}

The semantics are intuitive: row-rule draws the line between rows, column-rule draws the line between columns, and both work whether the container is a grid or flexbox. Compared with adding border-bottom to every child and then removing it from the last item, the declarative property is clearly less work and easier to maintain.

A typical win: a team's pricing comparison page changes its column count every quarter (from three columns to four). Previously each change meant editing the border logic of three or four components. With column-rule, you only edit grid-template-columns and the dividers follow automatically — the integration time drops from half a day to about fifteen minutes. This kind of "less code, fewer bugs" payoff is what drives teams to adopt new features.

Why this matters for front-end teams

  • Less DOM noise: no extra divs or spans for visual separation, decoupling structure from style and improving accessibility.
  • Easier responsive work: when grid breakpoints change item counts, gap decorations automatically follow gap, so you don't patch things in every media query.
  • Perfect for tables and pricing pages: data tables, pricing cards, and feature-comparison blocks that need "a dashed line per row and a solid line per column" can be expressed directly with row-rule/column-rule.

Browser support and fallbacks

As of August 2026, gap decorations are primarily supported by Chromium-based browsers (Chrome and Edge 149+); Safari and Firefox are still catching up, and Web Platform Tests data suggests the feature is heading toward Baseline "Newly available". Before shipping, we recommend:

  1. Feature-detect with @supports (column-rule: 1px solid #000);
  2. Keep a fallback for unsupported browsers — retain border pseudo-classes or accept a cleaner layout without dividers;
  3. During cross-browser testing, pay special attention to whether dividers stay aligned after items wrap.

Common questions

Do gap decorations change the box model? No. column-rule/row-rule are drawn inside the gap; they take no space from the items and add no extra overhead.

Can I draw rounded or gradient lines? Currently column-rule/row-rule follow the border shorthand syntax (width, style, color); rounded corners and gradients are not supported yet — those still need pseudo-elements.

What about Safari users? Feature-detect with @supports and fall back, or treat dividers as progressive enhancement — in unsupported browsers the page simply has no decorative lines while the layout itself is unaffected.

Combine with other modern CSS

2026 is the peak of "replace JS patches with CSS." Besides gap decorations, field-sizing (auto-sizing form controls), text-fit (auto-scaling font size), and focusgroup (declarative keyboard navigation) are all reaching stable browsers. Combined with Web Components and animation performance optimization, front ends can be lighter and smoother.

16IDC Take

Every "one less JS patch" in layout capability lowers the cost of building websites. For teams using front-end frameworks or plain HTML/CSS, following these Baseline-level CSS features pays off more than adopting yet another framework. Note that gap decorations are currently supported mainly by Chromium-based browsers, so in production check the compatibility practices in the Frontend Building category and keep a fallback strategy.

Source: https://css-tricks.com/css-gap-decorations-now-available/
Reference: MDN column-rule https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule