Gap decorations (column-rule / row-rule in grid and flex)

Chrome 149 (Juni 2026). Nicht Baseline.

Chrome 149Edge 149Safari noFirefox no

Zeichnet Linien in Grid-/Flex-Lücken mit `column-rule` und `row-rule` (plus `*-rule-inset` und `-outset`), sodass Trennlinien zwischen Karten keine Ränder oder Pseudo-Elemente brauchen.

CSS

.fx-058 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  font-family: system-ui;
    column-rule: 1px solid #ddd;
  row-rule: 1px solid #ddd;
  column-rule-inset: 4px
}
.fx-058 li {
  padding: 16px;
  text-align: center
}

HTML

<ul class="fx-058"><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li></ul>

Fallback: Andere Browser zeigen das Grid ohne Linien; ergänze `border`-Regeln unter `@supports not (row-rule: 1px solid red)`, wenn Trenner erforderlich sind.

Quelle: developer.chrome.com/release-notes/149

Prompt

Zeichne Trenner zwischen Grid- oder Flex-Elementen mit `column-rule` und `row-rule` auf dem Container (Chrome 149+), nicht mit Rändern auf den Elementen. Wenn Trenner browserübergreifend unverzichtbar sind, ergänze einen `@supports not (row-rule: 1px solid red)`-Block mit Rändern pro Element.