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

Chrome 149 (junio de 2026). No es Baseline.

Chrome 149Edge 149Safari noFirefox no

Dibuja líneas dentro de los huecos de grid/flex con `column-rule` y `row-rule` (más `*-rule-inset` y `-outset`), así que las líneas divisorias entre tarjetas no necesitan bordes ni pseudoelementos.

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: Los demás navegadores muestran el grid sin líneas; añade reglas `border` bajo `@supports not (row-rule: 1px solid red)` si los divisores son imprescindibles.

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

Prompt

Dibuja divisores entre elementos de grid o flex con `column-rule` y `row-rule` en el contenedor (Chrome 149+), no con bordes en los elementos. Si los divisores son esenciales en todos los navegadores, añade un bloque `@supports not (row-rule: 1px solid red)` con bordes por elemento.