grid-auto-flow: dense y el orden de lectura

grid-auto-flow: row dense rellena los huecos que deja el empaquetado por defecto, y el resultado visual suele ser notablemente mejor. El precio es que el orden visual deja de coincidir con el orden del documento, y ese desajuste no lo percibe quien mira la pantalla pero sí quien navega con teclado o con lector de pantalla. Es una de las pocas propiedades de CSS con un coste de accesibilidad directo y medible, y merece que la decisión se tome a conciencia.

Qué cambia exactamente

La palabra clave dense se añade al valor de grid-auto-flow, junto a row o column:

.rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
  gap: 0.5rem;
}

El cambio en el algoritmo es de una sola línea: en lugar de que el cursor conserve su posición entre elementos, se reinicia al principio de la rejilla antes de colocar cada uno. El efecto es que cada elemento busca sitio desde el primer hueco disponible, no desde donde se quedó el anterior.

Con el ejemplo de la lección anterior —tres columnas, cuatro elementos, el tercero de dos columnas de ancho— el resultado cambia:

Disperso (por defecto):     Denso:
[ A ][ B ][   ]             [ A ][ B ][ D ]
[   C    ][ D ]             [   C    ][   ]

D, que necesitaba una sola columna, encuentra sitio en la celda 3 de la primera fila. El hueco desaparece.

Lo que se rompe

El orden en el que un usuario recorre los elementos interactivos con el tabulador lo determina el orden del DOM. El orden en el que un lector de pantalla anuncia el contenido lo determina el orden del DOM. dense no toca el DOM: solo cambia dónde se dibuja cada caja.

El resultado con el ejemplo anterior: al tabular, el foco va de A a B, luego salta abajo a la izquierda a C, y después vuelve arriba a la derecha a D. Para quien ve la pantalla, el foco se mueve dando un salto hacia atrás y hacia arriba que no tiene ninguna lógica visible.

En una galería de treinta elementos con tamaños variables, el foco puede saltar por toda la rejilla de forma aparentemente aleatoria. Un usuario con motricidad reducida que navega con teclado pierde por completo el hilo, y uno con visión parcial que usa magnificador puede quedarse sin saber dónde está el foco.

Esto no es una hipótesis. Es el mismo problema que las WCAG describen en el criterio 1.3.2, Secuencia significativa, y en el 2.4.3, Orden del foco. Ambos son de nivel A, el más básico.

Cuándo es aceptable

Hay un criterio que funciona y se puede aplicar sin discutir: dense es aceptable cuando el orden de los elementos no comunica nada y ninguno de ellos es interactivo por separado.

Es aceptable en una galería de fotos decorativas sin enlaces individuales, en un mosaico de logotipos, en un fondo de piezas visuales. Ahí no hay orden que romper porque no había orden que respetar.

Es dudoso en una galería de fotos donde cada una es un enlace. El desajuste del foco es real, aunque el contenido no tenga jerarquía.

No es aceptable en resultados de búsqueda, en listas ordenadas por relevancia o fecha, en un panel de productos con precios, ni en nada donde el usuario tenga motivos para asumir que el orden significa algo. Y menos aún si hay elementos interactivos: ahí dense está creando un problema de navegación real a cambio de eliminar un hueco.

/* Aceptable: mosaico decorativo sin interacción */
.mosaico {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  grid-auto-rows: 8rem;
  grid-auto-flow: row dense;
  gap: 0.25rem;
}
.mosaico img { inline-size: 100%; block-size: 100%; object-fit: cover; }

Las alternativas al hueco

Si tienes huecos y no puedes usar dense, hay tres salidas.

Uniformar los tamaños. Los huecos aparecen porque hay elementos de amplitudes distintas. Si todos ocupan una pista, no hay huecos posibles.

Ordenar los datos en el servidor. Si controlas el orden en el que llegan los elementos, puedes emitirlos en un orden que no deje huecos. El orden del DOM y el visual siguen coincidiendo porque el DOM es el que has cambiado, y eso sí es legítimo.

Aceptar el hueco. Suele ser la respuesta correcta. Una celda vacía en una rejilla es una imperfección visual menor que casi ningún usuario nota, y desde luego menos grave que un orden de foco impredecible.

Y un apunte sobre masonry, el layout tipo mampostería que rellena verticalmente sin huecos: sigue siendo una discusión abierta en el grupo de trabajo, con propuestas sintácticas distintas sobre la mesa, y no es algo con lo que puedas contar en producción. Cuando alguien pide “un grid tipo Pinterest”, lo que existe hoy es dense con sus limitaciones o una implementación en JavaScript.