Layout masonry: enfoques con CSS y JS

El diseño Masonry coloca los elementos en columnas, donde cada uno ocupa el siguiente espacio vertical disponible, como en Pinterest. Los elementos tienen el mismo ancho de columna, pero alturas variables. El resultado es una cuadrícula densa y visualmente dinámica, sin espacios en blanco innecesarios entre filas.

Chrome y Firefox, con una opción experimental activada mediante una bandera, admiten grid-template-rows: masonry. Los elementos se colocan en columnas, pero las filas se ajustan a la altura de su contenido, lo que permite compactar elementos de altura variable sin espacios. Esta es la futura solución nativa.

Las columnas de CSS crean un diseño similar a Masonry: columns: 3; column-gap: 1rem. Los elementos fluyen automáticamente de arriba abajo dentro de cada columna. La limitación es que los elementos se ordenan por columnas (parte superior de la columna 1, parte superior de la columna 2...) y no por filas, lo que afecta al orden de lectura y la accesibilidad.

Evite que los elementos se dividan entre columnas: break-inside: avoid en cada elemento. Sin esto, una tarjeta alta puede dividirse entre dos columnas y cortar el contenido por la mitad. Añádalo siempre que use columnas de CSS para contenido similar a tarjetas.

Masonry.js (de David DeSandro) reposiciona elementos con posicionamiento absoluto calculando la altura de las columnas y colocando cada elemento en la columna más corta. Isotope amplía esta funcionalidad con ordenación y filtrado. Ambas requieren JavaScript para calcular y aplicar las posiciones.

Un enfoque ligero consiste en definir una cuadrícula con columnas fijas y filas de 1px, y después usar JavaScript para establecer grid-row-end: span N en cada elemento según su altura de contenido / altura de fila. Los elementos mantienen la alineación de las filas de la cuadrícula y consiguen alturas variables.

Las posiciones de Masonry quedan obsoletas cuando cambia el tamaño de la ventana o se cargan imágenes. Use ResizeObserver para detectar cambios de tamaño y activar el recálculo. Aplique debounce a los recálculos para evitar un procesamiento excesivo durante eventos rápidos de redimensionamiento.

Las imágenes con alturas desconocidas hacen que Masonry se recalcule después de cargarse. Proporcione atributos explícitos de width y height en todas las imágenes para que el navegador reserve espacio antes de cargarlas. Esto evita cambios de posición y reduce el número de pasadas de recálculo.

Añadir elementos a un diseño Masonry requiere recalcular únicamente las columnas afectadas (las de los elementos nuevos), no toda la cuadrícula. Bibliotecas como Masonry.js admiten la animación de elementos añadidos y un diseño incremental sin reorganizar toda la cuadrícula con cada nuevo lote.

El orden visual de Masonry difiere del orden del DOM en los diseños cuyos elementos se posicionan mediante JavaScript. Asegúrese de que el orden de tabulación siga el orden del DOM (la secuencia lógica de lectura), no la posición visual. Añada tabindex con cuidado o confíe en el flujo natural del DOM para la navegación con teclado.

Las columnas de CSS son sencillas y no requieren JavaScript, pero tienen una secuencia de lectura ordenada por columnas (no por filas) y no permiten filtrar ni ordenar. La cuadrícula Masonry aún no tiene compatibilidad para producción. Masonry con JavaScript ofrece todas las funciones, pero añade peso y un retraso de renderizado mientras se calculan las posiciones después de cargar el contenido.

¿Qué propiedad CSS evita que una tarjeta se divida entre dos columnas de CSS?

El diseño Masonry se puede conseguir con columnas de CSS (sencillas, pero ordenadas por columnas), con el experimental grid-template-rows: masonry (orientado a la solución futura) o con bibliotecas JavaScript como Masonry.js (completas, con ordenación y filtrado). Cada enfoque implica compromisos entre sencillez, accesibilidad y funcionalidad.