CSS Grid Level 3, también conocido como el diseño “Masonry”, pide ayuda para su creación

• Está en marcha una propuesta para añadir el diseño Masonry de CSS Grid (también llamado diseño de mampostería o de cascada) a CSS Grid Level 3

  • El diseño Masonry es un patrón que llena el contenido de forma compacta, como ladrillos o un muro de piedra, y permite distribuir elementos de distintos tamaños sin recortarlos ni omitirlos, haciendo que el contenido fluya por columnas
  • Este era un tipo de diseño difícil de implementar solo con CSS y sin JavaScript

• Se crearon 4 demos para probar cómo implementar el mecanismo Masonry en CSS

  • Crear un diseño Masonry/de cascada clásico
  • Aprovechar las distintas funciones de definición de columnas de Grid
  • Aprovechar la función de combinación de columnas de Grid
  • Usar Subgrid y posicionamiento explícito

• Al combinar las distintas funciones de Grid con Masonry, se pueden crear diseños mucho más creativos y dinámicos

  • Definición flexible y variada del tamaño de columnas con unidades fr, max-content, min-content y la función minmax()
  • Combinación de columnas para destacar ciertos ítems o construir una cuadrícula más variada
  • Con Subgrid, ajustar las pistas de grids anidados al contenedor padre
  • Posicionamiento explícito para definir la ubicación de elementos específicos, como encabezados

• También existe la postura de que el diseño Masonry debería separarse como un tipo de display independiente

  • Hay preocupación de que combinar CSS Grid y Masonry aumente la complejidad y afecte negativamente el rendimiento
  • Si Masonry se separa de Grid, ambas funciones podrían evolucionar de forma independiente
  • Pero también hay opiniones que proponen implementar Masonry solo como un diseño limitado de columnas del mismo tamaño

• Se considera que incluir la función Masonry dentro de CSS Grid ofrece más ventajas

  • La especificación de CSS Grid Level 3 ya está escrita y fue implementada en 2 motores de navegador
  • En adelante se podrían ofrecer las mismas funciones nuevas tanto a Grid como a Masonry (por ejemplo, estilizado de pistas)
  • Masonry también es un tipo de Grid, así que encaja bien a nivel conceptual

• Se quiere escuchar la opinión de diseñadores y desarrolladores web

  • ¿Masonry debería formar parte de CSS Grid?
  • ¿Quieren poder usar todas las funciones de Grid, como distintos tamaños de columna, combinación de columnas, posicionamiento y Subgrid, o es mejor admitir solo columnas del mismo tamaño?
  • ¿Cómo usarían esta función? ¿Qué tipos de diseño podrían crear?
  • Si tienen demos hechas por ustedes mismos, compártanlas
  • ¿Hay diseños que sean difíciles de implementar con este modelo?

• Puede que el nombre Masonry no sea el más adecuado. Podría valer la pena considerar una sintaxis como grid-template-rows: off, en el sentido de eliminar las filas. Tomen en cuenta que el nombre podría cambiar en el futuro

La opinión de GN⁺

• Creemos que añadir la función Masonry a CSS Grid sería un cambio significativo que aumentaría mucho la capacidad expresiva de los layouts web. En especial, resulta atractivo poder implementar fácilmente grids en columnas que solo fluyen en dirección vertical
• En cambio, es difícil estar de acuerdo con la postura de separar Masonry como un tipo de display independiente y limitar sus funciones. Más bien, parece que el alcance de uso de los diseños Masonry se ampliaría aún más al combinarse con las potentes funciones de Grid
• Aun así, el nombre Masonry no es intuitivo y puede generar confusión, por lo que sería bueno considerar otro nombre que represente una cuadrícula solo de columnas. Una sintaxis como grid-template-rows: none, que transmita con claridad la idea de una “grid sin filas”, podría ser mejor
• Esperamos que esta propuesta pueda convertir a CSS Grid en una herramienta todavía más potente. Parece importante experimentar con distintos casos de diseño y dar opiniones de forma activa

[GN⁺]

Opinión de Hacker News

Resumen:

• El CSSWG y los equipos de DevRel de los navegadores han estado debatiendo desde 2020 cómo incluir oficialmente el layout Masonry en CSS
  • El equipo de WebKit decidió hacer pública esta discusión para recoger opiniones de diseñadores y desarrolladores
  • Esto podría sentar un precedente importante, y es un debate fundamental sobre si todas las opciones de layout deberían tratarse como parte de CSS Grid o si se deberían seguir agregando nuevas propiedades de CSS Display según sea necesario
• Comparar el layout Masonry con apilar ladrillos es divertido, pero si se apilaran ladrillos reales de esa manera sería un desastre de ingeniería estructural
• La demo de megamenu es un caso de uso inapropiado del layout Masonry, porque arruina el flujo de lectura y defrauda gravemente las expectativas
  • Los usuarios con discapacidad visual siempre terminarán leyendo en el orden "incorrecto"
  • Debería haberse implementado con columnas usando break-inside: avoid
• La demo del periódico también es un poco cuestionable por razones similares
• En el caso de imágenes o medios dentro de bloques independientes, el layout Masonry funciona mejor
• Como estas demos están basadas en Grid layout, incluso en navegadores que no lo soportan se muestran en un formato razonable de filas fijas
• Me gusta la sensación general de los layouts Masonry/Waterfall
  • Sin embargo, sería bueno contar con un layout que preserve más el flujo de lectura de izquierda a derecha en lugar del alineamiento Masonry predeterminado
• Reflexión sobre cómo diseñar un sistema de layout que pueda reemplazar CSS
  • Me pregunto si sistemas realmente implementados como Qt, Tk o SwiftUI tienen aspectos mejores
  • ¿Cómo se podría ofrecer una mejor interfaz para los desarrolladores?
• Presentación de un caso en el que se implementó un efecto Masonry sin JS en un sitio web personal de fotografía
  • Se usó display:inline-block para tratar las fotos como si fueran texto y hacer que se redistribuyeran al pasar a una nueva línea
  • El resultado fue más satisfactorio que con una librería Masonry
• Ya existen Flexbox y Grid layout, así que se cuestiona si realmente tiene sentido agregar más opciones de "layout" a CSS
  • Una mejor solución podría ser crear un sistema final basado en restricciones que, aunque complejo, cubra todos los casos de layout
• Da gusto ver al equipo de WebKit volver a hacer un excelente trabajo de forma pública