Sistema de Cuadrícula Masonry

¿Qué hace Sistema de Cuadrícula Masonry?

Propósito

El Sistema de Cuadrícula Masonry proporciona un marco de diseño estandarizado y responsivo para mostrar tarjetas de contenido no uniformes de altura variable (como portafolios de fotografía, feeds de contenido generado por usuarios, tarjetas de medios mixtos o tableros de descubrimiento editorial). Los diseños estándar de CSS Grid fuerzan la alineación de la altura de las filas, creando espacios verticales incómodos cuando los elementos tienen relaciones de aspecto o longitudes de texto variables.

Diseñar una cuadrícula masonry efectiva requiere resolver el desafío espacial de empaquetar elementos dinámicamente en columnas verticales paralelas, prevenir el Cambio de Diseño Acumulativo (CLS) a medida que los activos multimedia se cargan, garantizar una degradación elegante de las columnas en dispositivos móviles y—críticamente—evitar que el diseño visual rompa el orden lógico de lectura del DOM y la secuencia de navegación por teclado (WCAG 2.1 SC 1.3.2 y SC 2.1.1).

Casos de Uso

• Portafolios de Fotografía y Medios Visuales: Mostrar galerías de imágenes con relaciones de aspecto nativas variables (retrato, paisaje, cuadrado, panorámica) en una cuadrícula apretada y sin espacios.
• Feeds de Actividad Social y UGC: Organizar tarjetas sociales mixtas que contienen actualizaciones de texto cortas, artículos completos, imágenes incrustadas y avances de video.
• Muros de Reseñas UGC y Comercio Electrónico: Presentar fotos de reseñas de clientes, publicaciones de Instagram etiquetadas y fragmentos destacados de productos en un escaparate de descubrimiento dinámico.
• Tableros de Descubrimiento Editorial y Pinboards: Construir moodboards, gestores de marcadores y feeds de inspiración donde las tarjetas contienen diversos elementos de contenido con huellas verticales variables.

Cuándo NO Usar

• Cuadrículas de Relación de Aspecto Uniforme: Si todos los elementos comparten relaciones de aspecto idénticas (por ejemplo, tarjetas de video estándar 16:9 o catálogos de productos 1:1), use responsive-grid-system o card-ui-system.
• Destacados Asimétricos 2D Estructurados: Para secciones hero curadas con reglas explícitas de expansión rectangular 2D (por ejemplo, una característica principal de 2x2 junto con bloques de estadísticas de 1x1), use bento-grid-layout-system.
• Datos Tabulares o Alineados Estrictos: Cuando los usuarios necesitan comparar valores a través de filas horizontales (por ejemplo, tablas de precios o métricas financieras), use data-table-ui-system o comparison-matrix-system.
• Narrativas Secuenciales y Artículos: Para narrativas lineales donde el orden de lectura debe seguir estrictamente un solo flujo vertical, use article-layout-system o section-composition-system.

Entradas

1. Inventario de Contenido y Relaciones de Aspecto: Tipos de contenido multimedia y de texto (imágenes, videos, fragmentos de texto, tarjetas de acción) y su espectro de relaciones de aspecto (desde retrato 3:4 hasta paisaje 16:9).
2. Requisitos de Arquitectura de Columnas: Números objetivo de columnas en diferentes tamaños de pantalla (por ejemplo, 4 columnas en escritorio panorámico, 3 en escritorio, 2 en tableta, 1 en móvil).
3. Requisitos de Interactividad y Enfoque: Elementos interactivos dentro de las tarjetas (botones, lightboxes, alternadores en línea, enlaces) que requieren accesibilidad por teclado.
4. Tokens Espaciales y de Tema: Medianiles de columna fluidos y espacios entre filas (gap: clamp(12px, 2vw, 24px)), fondos de tarjeta, radios de borde y tokens de anillo de enfoque (de fluid-spacing-system y focus-indicator-design-system).

Salidas

1. Especificación de Arquitectura de Diseño Masonry: Elección estratégica y plano técnico entre flujo CSS Multi-Columna puro, expansión de filas CSS Grid (grid-auto-rows) y empaquetado de columna más corta en JavaScript.
2. Matriz de Escalado de Columnas Responsivo: Definición de puntos de interrupción para transiciones suaves en el recuento de columnas y escalado de espacios.
3. Mapa de Orden de Lectura del DOM y Enfoque del Teclado: Arquitectura que asegura que la navegación por teclado (Tab / Shift+Tab) siga el orden de lectura visual natural sin saltos caóticos entre columnas.
4. Reglas de Estabilidad del Diseño y Preservación de Relación de Aspecto: Arquitectura CSS que previene el Cambio de Diseño Acumulativo (CLS) durante la carga de imágenes y medios.

---

Flujo de Trabajo

1. Seleccionar la Estrategia Arquitectónica

Elija la técnica de diseño adecuada según los requisitos de interactividad y orden de lectura:

• Opción A: Diseño CSS Multi-Columna Puro (column-count)
  • Mejor para: Galerías estáticas, feeds con muchas imágenes o tarjetas no interactivas donde el orden de flujo puede ir verticalmente hacia abajo en la columna 1, luego en la columna 2, etc.
  • Implementación: column-count: 4; column-gap: var(--space-m);. Establezca break-inside: avoid; margin-bottom: var(--space-m); en las tarjetas hijas.
  • Compensación: El orden vertical de la fuente (de arriba a abajo dentro de las columnas) puede confundir a los usuarios de teclado si las tarjetas contienen controles interactivos.
• Opción B: CSS Grid con Expansiones de Filas (grid-auto-rows y grid-row: span X)
  • Mejor para: Cuadrículas semi-estáticas donde las alturas de las tarjetas se pueden cuantificar en unidades de pista de fila fijas (por ejemplo, pistas base de 10px).
  • Implementación: display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-rows: 10px; gap: 16px;. JavaScript calcula la altura del contenido y aplica grid-row: span Math.ceil(height / trackHeight).
  • Compensación: El orden horizontal nativo del DOM se conserva, pero requiere cálculos menores de altura en JS o consultas de contenedor.
• Opción C: Distribución de Contenedores de Columna Más Corta en JavaScript
  • Mejor para: Feeds de medios mixtos altamente interactivos donde el orden de lectura de izquierda a derecha es primordial y las tarjetas contienen enlaces, botones y controles de formulario.
  • Implementación: Cree $N$ contenedores de columna flex (display: flex; flex-direction: column; gap: var(--space-m);). Agregue las tarjetas entrantes a la columna que actualmente tenga la altura total renderizada más corta.
  • Compensación: Requiere gestión del contenedor DOM del lado del cliente, pero garantiza un flujo de enfoque DOM perfecto de izquierda a derecha y cero espacios verticales visuales.

2. Definir el Ritmo Espacial y los Medianiles de Columna

Establezca tokens de espaciado consistentes en todas las columnas y el relleno interno de las tarjetas:

• Medianiles de Columna: Use espaciado de espacio fluido (por ejemplo, gap: clamp(16px, 2.5vw, 28px)). Asegúrese de que los espacios verticales entre tarjetas apiladas sean iguales a los espacios horizontales de las columnas para mantener una densidad espacial uniforme.
• Relleno de Tarjeta y Alineación Interna: Estandarice el relleno interno de la tarjeta usando tokens fluidos (padding: var(--space-m)). Para tarjetas solo de medios (por ejemplo, activadores de lightbox), permita que las imágenes se extiendan de borde a borde (padding: 0; overflow: hidden;).
• Sincronización del Radio de Esquina: Aplique un radio de borde consistente a los contenedores de tarjetas exteriores (por ejemplo, 12px a 16px). Asegúrese de que los elementos internos (por ejemplo, imágenes superiores) hereden radios de esquina concéntricos (border-top-left-radius: calc(var(--card-radius) - 1px)).

3. Prevenir el Desplazamiento del Diseño (CLS) y las Distorsiones de Imagen

Las cuadrículas masonry son altamente susceptibles al Cambio de Diseño Acumulativo durante la carga de imágenes:

• Cajas de Relación de Aspecto: Declare explícitamente aspect-ratio en los contenedores de imagen (aspect-ratio: 4 / 5; object-fit: cover; width: 100%; display: block;) o calcule las relaciones de relleno en línea antes de que se resuelvan los medios.
• Marcadores de Posición Esqueleto: Renderice pulsos de fondo esqueleto estilizados (background: var(--surface-subtle); animation: pulse 1.5s infinite;) que coincidan con la relación de aspecto esperada de la tarjeta mientras se cargan los activos remotos.
• Oyentes de Carga de Imagen: Si usa cálculos de altura en JS, vincule ResizeObserver o los oyentes de eventos load de imagen para recalcular las asignaciones de altura de columna una vez que las imágenes terminen de renderizarse.

4. Reconciliar el Orden de Lectura del DOM y la Gestión del Enfoque

Garantice el cumplimiento de WCAG 1.3.2 (Secuencia Significativa) y 2.1.1 (Teclado):

• Evite Desconexiones Visual-DOM: Si se usan Columnas CSS donde el diseño visual fluye verticalmente hacia abajo en las columnas, asegúrese de que los indicadores de enfoque del teclado permanezcan distintos y lógicos. Si las tarjetas contienen controles interactivos, prefiera la distribución de Columna Más Corta en JavaScript o la expansión de filas CSS Grid para mantener una secuencia de tabulación natural de izquierda a derecha y de arriba a abajo (orden de tecla Tab).
• Visibilidad del Indicador de Enfoque: Estandarice indicadores de enfoque de alto contraste y no recortados (outline: 3px solid var(--focus-ring-color); outline-offset: 3px;). Evite overflow: hidden en las tarjetas sin agregar suficiente relleno del indicador de enfoque dentro de los límites del clip.
• Atajos de Teclado para Lightboxes / Modales: Si hacer clic en una tarjeta masonry abre una superposición modal o lightbox, atrape el enfoque del teclado dentro de la superposición (focus-trap) y devuelva el enfoque al activador de la tarjeta de origen al cerrar (tecla Escape).

5. Implementar el Escalado de Columnas Responsivo

Diseñe puntos de interrupción para escalar suavemente el número de columnas sin romper el equilibrio del contenido:

• Escritorio Panorámico (≥ 1440px): 4 Columnas (column-count: 4 o 4 pistas de columna flex).
• Escritorio Estándar (1024px – 1439px): 3 Columnas (column-count: 3 o 3 pistas de columna flex).
• Tableta / Pantalla Pequeña (640px – 1023px): 2 Columnas (column-count: 2 o 2 pistas de columna flex).
• Móvil (< 640px): 1 Columna (column-count: 1 o pila vertical única). Todos los elementos se apilan naturalmente con espaciado vertical estándar.

---

Reglas de Decisión

Matriz de Selección Arquitectónica

Tipo de Contenido e Interacción	Estrategia Arquitectónica Recomendada	Justificación
Galería de Imágenes Puras (Activadores de Lightbox)	CSS Multi-Columna (column-count)	Huella JS cero, rendimiento nativo de múltiples columnas del navegador, masonry de imágenes vertical limpio.
Tarjetas Interactivas (Botones, Entradas, Enlaces)	Distribución Flex de Columna Más Corta en JS	Preserva el orden estricto de tabulación DOM de izquierda a derecha, evitando saltos de enfoque del lector de pantalla y del teclado.
Feed de Carga Dinámica (Desplazamiento Infinito)	Expansión de Filas CSS Grid o Distribución de Columnas en JS	Permite agregar nuevas tarjetas sin problemas a la columna más corta sin reorganizar todo el diseño de la página.
Tablero Editorial con Mucho Texto	Expansión de Filas CSS Grid (grid-auto-rows: 10px)	Mantiene el orden de lectura horizontal mientras se adapta con precisión a longitudes de texto variables.

---

Restricciones

• Accesibilidad (Cumplimiento WCAG 2.1 AA):
  • SC 1.3.2 Secuencia Significativa: La disposición visual de las tarjetas interactivas debe alinearse lógicamente con el orden de navegación por tabulación del teclado (flujo de enfoque tabindex="0").
  • SC 1.4.3 Contraste (Mínimo): El texto renderizado sobre superficies de tarjetas o superposiciones de imágenes debe satisfacer una relación de contraste mínima de 4.5:1. Se deben usar superposiciones oscuras (background: linear-gradient(to top, rgba(0,0,0,0.8), transparent)) para el texto colocado directamente sobre imágenes.
  • SC 2.1.1 Teclado: Todos los elementos interactivos de las tarjetas (como botones, activadores de marcadores, enlaces externos) deben ser totalmente operables mediante las teclas Espacio e Intro.
  • SC 2.4.7 Enfoque Visible: Las tarjetas y activadores interactivos deben mostrar un anillo de enfoque distinto que no sea recortado por las propiedades overflow: hidden de la tarjeta principal.
  • SC 2.5.8 Tamaño del Objetivo: Todos los objetivos táctiles dentro de las tarjetas masonry deben mantener un área interactiva mínima de 24x24px (mínimo 44x44px en viewports táctiles/móviles).
• Rendimiento de Desplazamiento del Diseño: Las imágenes dentro de las tarjetas masonry deben tener relaciones de aspecto intrínsecas definidas explícitamente o reservas de dimensiones para garantizar que el CLS permanezca por debajo de 0.1.

---

Patrones de Falla Comunes

• La Mezcla de Tabulación del Teclado: Usar column-count de CSS para tarjetas interactivas, haciendo que la tecla Tab del teclado se mueva verticalmente hacia abajo por toda la primera columna (del elemento 1 al 10) antes de saltar de nuevo a la parte superior de la columna 2.
• Caos por Cambio de Diseño Acumulativo (CLS): Insertar imágenes sin estilo de relación de aspecto o esqueletos de carga, causando que las columnas masonry se reorganizen y salten repetidamente a medida que se carga cada imagen.
• Anillos de Enfoque Recortados: Establecer overflow: hidden en las tarjetas masonry para forzar esquinas de imagen redondeadas, lo que corta el anillo de enfoque de contorno estándar de los elementos interactivos internos.
• Alturas de Columna No Restringidas en Móvil: No colapsar las cuadrículas masonry a una sola columna en dispositivos móviles, lo que resulta en tarjetas multicolumna ultra estrechas y aplastadas con ajuste de texto ilegible.
• Recuentos de Columna Desiguales: Agregar nuevos elementos en feeds dinámicos secuencialmente a través de las columnas (1, 2, 3, 1, 2, 3) en lugar de verificar las alturas de las columnas, creando enormes espacios en blanco verticales en la parte inferior de las columnas más cortas.

---

Criterios de Validación

• Alineación Arquitectónica: La estrategia seleccionada (Columnas CSS vs. Expansión de Filas CSS Grid vs. Columna Más Corta en JS) coincide con los requisitos de interactividad de la tarjeta.
• Sin Espacios Verticales No Intencionados: Las tarjetas se empaquetan firmemente sin espacios de espacio en blanco por alineación de filas horizontales.
• Navegación por Tabulación del Teclado: Las tarjetas interactivas siguen una secuencia de tabulación visual lógica (de izquierda a derecha, de arriba a abajo).
• Prevención del Desplazamiento del Diseño: Las relaciones de aspecto o los contenedores esqueleto evitan CLS (<0.1) a medida que se cargan los medios remotos.
• Adaptación de Puntos de Interrupción Responsivos: La cuadrícula se escala suavemente de 4 columnas en pantalla ancha a 1 columna vertical única en móvil (<640px).
• Cumplimiento WCAG AA: Todo el texto cumple con un contraste ≥4.5:1, los objetivos táctiles cumplen con ≥24x24px (≥44x44px en móvil) y los anillos de enfoque no están recortados y son claramente visibles.