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

Estado: Chrome 149 (junio de 2026). No es Baseline.  
Fuente: https://developer.chrome.com/release-notes/149  
Página: https://designforai.dev/es/css/gap-decorations

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.

## HTML

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

## CSS

```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
}
```

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.

## 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.