Por años, añadir líneas divisorias entre elementos de Flexbox o Grid significaba ensuciar tu HTML. Calculabas bordes matemáticamente imposibles o abusabas de pseudo-elementos que destrozaban la accesibilidad. El comité de CSS finalmente notó nuestro sufrimiento colectivo.

Save

Las Gap Decorations ya son una realidad estable. Chrome y Edge lanzaron esta característica en su versión 149, permitiendo estilizar los espacios vacíos directamente desde el contenedor. Nada de nodos fantasma en el DOM. A continuación te explico cómo implementarlas.

Adiós a los bordes condicionales

El concepto recae en propiedades que ya conocíamos en diseños multicolumna, pero ahora potenciadas para Grid y Flexbox. Hablamos de column-rule y su nuevo hermano para separaciones horizontales, row-rule.

Puedes usar el atajo rule para configurar ambos simultáneamente. Observa cómo dividimos un contenedor flex en un solo paso:

.flex-split {
  display: flex;
  gap: 20px;
  /* El atajo define el divisor del gap directamente */
  column-rule: 2px dashed #d4d0c8;
}

Es puro CSS declarativo. Si el diseño es responsivo y los elementos cambian de posición, las líneas divisoras se ajustan y calculan solas.

Sintaxis avanzada: Patrones y repeticiones

La verdadera magia ocurre cuando necesitas variar los estilos de las separaciones. Las decoraciones de espacio soportan la función repeat(), idéntica a la que usas para definir tamaños de tracks en Grid.

Imagina un calendario donde necesitas separar las horas completas con líneas sólidas y las medias horas con líneas punteadas. Ahora es trivial de conseguir:

.calendar {
  display: grid;
  gap: 10px;
  /* Línea sólida para la hora, punteada para la media hora */
  row-rule-width: 2px, 1px;
  row-rule-style: solid, dashed;
  row-rule-color: #e8e4df, #f0ece7;
}

Controlando las intersecciones

Cuando cruzas filas y columnas, el navegador necesita saber qué hacer con el choque de líneas. Aquí entra la propiedad rule-break. Si trabajas con una cuadrícula de datos densa, esta propiedad mantiene el diseño limpio.

CSS

.dashboard {
  display: grid;
  column-rule: 2px solid #34d399;
  row-rule: 1px solid #1e1e36;
  /* Rompe la línea de la columna justo en la intersección */
  column-rule-break: intersection;
}

Si prefieres que las líneas se crucen de forma continua sin pausas, simplemente cambias el valor a none.

Animaciones y ajustes milimétricos

Las decoraciones son nativamente animables. Puedes hacer transiciones de color, grosor o de su posición dentro del espacio usando rule-inset. Esta última decide cuánto se encoge o expande la línea dentro del propio gap.

.interactive-grid {
  rule: 2px solid #fbbf24;
  rule-inset-junction: 10px;
  transition: rule-inset-junction 0.3s ease;
}

.interactive-grid:hover {
  /* La línea se expande para tocar los bordes al interactuar */
  rule-inset-junction: 0px;
}

Compatibilidad actual en navegadores

Esta funcionalidad está activa por defecto a partir de Chrome 149 y Edge 149. Si tu proyecto depende de estas líneas puramente para fines visuales, es una mejora progresiva perfecta. En navegadores antiguos, los usuarios simplemente verán el espacio vacío normal sin que el diseño colapse.

Es hora de revisar tu código y enviar a la papelera esos pseudo-elementos oscuros que usabas para simular divisores. Cuéntame en los comentarios cuántas líneas de CSS vas a borrar hoy de tus proyectos gracias a esta actualización.