v149 · CSS · Gap Decorations

Gap-Ruled Grid

An editorial grid with column-rule and row-rule drawing separator lines between cells. Purely decorative — no extra markup, no box-model changes, no :first-child tricks.

Chrome 149 / Edge 149: column-rule in grid and row-rule are new in Chrome 149. Other browsers will show the grid without the gap rules (graceful degradation — the layout is intact, just no separators).
Toggle rules:
CSS · May 2026

Gap decorations ship in Chrome 149

After years of workarounds, grid and flex gaps get native separator lines. No extra markup. No layout impact.

new
HTML · May 2026

Streaming HTML into any element

Chrome 148's streamHTMLUnsafe() lets you pipe a ReadableStream into a DOM element progressively.

stable
CSS · April 2026

contrast-color() auto-picks readable text

One CSS function, zero JavaScript, always readable: contrast-color() returns black or white based on background luminance.

stable
CSS · May 2026

Name-only container queries

Target a container by name without container-type. Style by identity, not by dimension.

stable
HTML · May 2026

Lazy loading comes to video and audio

loading="lazy" on video and audio defers loading until the element nears the viewport. Zero JavaScript required.

stable
CSS · April 2026

CSS border-shape non-rectangular borders

Redefine the CSS box geometry. Borders, shadows, outlines — all follow the shape.

stable

Compare: old border approach vs. gap decorations

Before — border on every child

article 1

Border on every cell, then cancel with :first-child tricks.

article 2

Doubled edges at shared corners — extra CSS to fix.

article 3

Gap is zero — padding is doing the spacing work.

.grid { display:grid; gap:0; }
.cell { border: 1px solid #000; padding: 1rem; }
/* cancel double borders */
.cell:not(:nth-child(3n)) { border-right: none; }
.cell:nth-child(n+4) { border-top: none; }

Chrome 149 — gap decorations

article 1

Gap handles spacing. Rule draws the line.

article 2

No cell-level CSS at all.

article 3

Centering in the gap is automatic.

.grid {
  display: grid;
  gap: 1rem;
  column-rule: 1px solid #000;
  row-rule: 1px solid #ccc;
}
/* That's it. No child CSS needed. */

Full CSS for the demo grid

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;

  /* Gap decorations — lines drawn inside the gap space */
  column-rule: 1px solid #000;
  row-rule: 1px solid #ccc;

  /* Alternating styles (repeat syntax): */
  /* row-rule-width: repeat(2, 1px), 3px; */
  /* row-rule-style: solid, dashed;        */
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗