The Gap Strikes Back: CSS Gap ahora se puede estilizar

• Antes era posible crear espacios con la propiedad CSS gap, pero no se podía estilizar el área del gap en sí, así que hacían falta varios atajos (elementos adicionales, border, pseudo-elementos, etc.)
• La nueva función CSS gap decorations permite dibujar directamente líneas (separadores) entre los elementos del layout con propiedades como row-rule, column-rule, etc.
• Se pueden aplicar decoraciones en Grid, Flexbox, Multi-column, e incluso pronto en Masonry, en todos los layouts principales, y mejorar la estructura visual solo con CSS puro, sin markup extra ni elementos innecesarios
• Admite varios estilos (grosor, color, patrón, etc.) con repetición y combinación, y permite control preciso con repeat(), outset, paint-order, entre otros
• Por ahora solo se puede usar activando una flag en navegadores basados en Chromium (Chrome/Edge 139+), mientras sigue en proceso de estandarización y expansión

---

Límites del gap tradicional y qué cambió

• Antes era difícil estilizar el área del gap, y había que agregar bordes o pseudo-elementos falsos para los separadores
• Ese enfoque traía varias desventajas, como problemas de tamaño del layout, accesibilidad y complejidad del markup
• Ahora apareció el estándar de gap decorations, que permite aplicar decoraciones (como líneas) en el espacio entre elementos con propiedades CSS simples

Introducción a CSS gap decorations

• column-rule: ya se usaba en multi-column para dibujar separadores verticales (ej.: column-rule: 1px solid black;)
• Ahora esta propiedad también se puede usar en flexbox y grid

  .my-grid-container {  
    display: grid;  
    gap: 2px;  
    column-rule: 2px solid pink;  
  }  
  

• row-rule: permite dibujar separadores entre filas (horizontalmente)

  .my-flex-container {  
    display: flex;  
    gap: 10px;  
    row-rule: 10px dotted limegreen;  
    column-rule: 5px dashed coral;  
  }  
  

• Repetición y combinación de varios estilos: se pueden mezclar distintos estilos con repeat() o separándolos con comas

  .my-container {  
    display: grid;  
    gap: 2px;  
    row-rule:  
      repeat(2, 1px dashed red),  
      2px solid black,  
      repeat(auto, 1px dotted green);  
  }  
  

• Propiedades de control fino: row-rule-break, column-rule-break, row-rule-outset, column-rule-outset, gap-rule-paint-order, etc., para ajustar en detalle la posición, las intersecciones y el orden de superposición

Ejemplo: uso práctico de gap decorations

• La página de ejemplo define el body como grid y separa header/nav/main/footer con gaps
• Con row-rule se pueden aplicar separadores de distinto grosor, color y estilo
• El menú de nav usa flexbox y column-rule para dibujar líneas entre los elementos
• El área principal usa flexbox para acomodar imágenes y texto con una forma tipo masonry, y refuerza la estructura estilo cuadrícula con row-rule y column-rule
• Con column-rule-outset: 0; y similares se puede ajustar con precisión dónde empiezan y terminan las líneas

Soporte en navegadores y activación

• Por ahora requiere activar una flag (about://flags → Experimental Web Platform Features) en navegadores basados en Chromium como Chrome/Edge 139+
• La estandarización oficial sigue en curso, y se recomienda probarla y dar feedback

Más información y Playground

• Borrador del estándar CSS Gap Decorations Module Level 1
• Explainer de Microsoft Edge
• En el Playground interactivo se pueden probar visualmente varias combinaciones de decoraciones
• Los issues sobre la función, compatibilidad y feedback se pueden proponer en el Chromium issue tracker