Chrome 149 Ships CSS Gap Decorations, Style the Space Between Grid Items

Chrome 149 shipped CSS Gap Decorations, the ability to style the gaps between items in Grid, Flexbox, and multi-column layouts using standard CSS properties. This replaces years of hacky pseudo-element and background tricks.

The new properties

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;

  /* Draw a line in each column gap */
  column-rule: 1px solid var(--border-color);
  column-rule-inset: 8px 0;

  /* Draw a line in each row gap */
  row-rule: 1px dashed var(--border-light);
  row-rule-inset: 0 8px;

  /* Control visibility when gaps intersect */
  column-rule-visibility-items: separate;
  row-rule-visibility-items: separate;
}

What this replaces

Before gap decorations, putting lines between grid items required:

• Background color on the container + background color on items (the "background peek-through" trick)
• Pseudo-elements on each item to draw borders
• JavaScript to measure and position divider elements

All of these broke when items spanned multiple rows or columns. Gap decorations handle spanning correctly by definition.

Also in Chrome 149

• shape-outside expansion, now supports path(), shape(), rect(), and xywh() in addition to the existing circle(), ellipse(), polygon()
• image-rendering: crisp-edges, pixel-art-friendly scaling mode
• CSS Nesting, reached Baseline Widely Available as of June 11, 2026

Browser support

Feature	Chrome	Firefox	Safari
Gap decorations	149	In development	In development
shape-outside: path()	149	,	,
CSS Nesting	✅	✅	✅

The bottom line

Gap decorations fill one of the last remaining feature gaps between CSS Grid and print layout systems (which have had column rules for decades). Chrome-only for now, but Firefox and Safari implementations are in progress. Use as progressive enhancement, the fallback is simply no gap lines, which is acceptable for most designs.