El equipo de Chrome está ansioso por ver una implementación de diseños de tipo de mampostería en la Web. Sin embargo, creemos que implementarlo como parte de la especificación de CSS Grid, como se propone en la publicación reciente de WebKit, sería un error. También creemos que la publicación de WebKit se refería a una versión de masonry que nadie estaba proponiendo.
Por lo tanto, el objetivo de esta publicación es explicar por qué en Chrome nos preocupa implementar el diseño de cuadrícula como parte de la especificación de CSS Grid Layout y aclarar exactamente lo que habilita la propuesta alternativa. En resumen:
- El equipo de Chrome está muy interesado en desbloquear la disposición en filas, ya que sabemos que es algo que los desarrolladores desean.
- Agregar un diseño de maratón a la especificación de la cuadrícula es problemático por razones que no se relacionan con si crees que el diseño de maratón es una cuadrícula o no.
- Definir la disposición en filas fuera de la especificación de la cuadrícula no impide que haya varios tamaños de segmentos para la disposición en filas ni el uso de propiedades como alineación o espacios, o cualquier otra función que se use en el diseño de cuadrícula.
¿Debe el diseño de maratón ser parte de la cuadrícula?
El equipo de Chrome cree que el diseño de mampostería debe ser un método de diseño independiente, definido con display: masonry (o con otra palabra clave si se decide un nombre mejor). Más adelante en esta publicación, puedes ver algunos ejemplos de cómo se podría ver en el código.
Existen dos motivos relacionados por los que creemos que la disposición en columnas se define mejor fuera del diseño de cuadrícula: el potencial de problemas de rendimiento del diseño y el hecho de que tanto la disposición en columnas como la cuadrícula tienen características que tienen sentido en un método de diseño, pero no en el otro.
Rendimiento
La cuadrícula y la disposición en filas son opuestas en términos de cómo el navegador controla el tamaño y la ubicación. Cuando se diseña una cuadrícula, todos los elementos se colocan antes del diseño y el navegador sabe exactamente qué hay en cada segmento. Esto permite el tamaño intrínseco complejo que es tan útil en la cuadrícula. Con la disposición en mosaico, los elementos se colocan según su diseño, y el navegador no sabe cuántos hay en cada segmento. Esto no es un problema con todas las pistas de tamaño intrínseco o todas las pistas de tamaño fijo, pero lo es si mezclas pistas fijas y intrínsecas. Para solucionar el problema, el navegador debe realizar un paso previo al diseño en el que se debe distribuir cada elemento de todas las formas posibles para obtener mediciones. Con una cuadrícula grande, esto contribuiría a los problemas de rendimiento del diseño.
Por lo tanto, si tuvieras un diseño de mampostería con una definición de segmento de grid-template-columns: 200px auto 200px, algo muy común en la cuadrícula, comenzarías a tener problemas. Estos problemas se vuelven exponenciales una vez que agregas subcuadrículas.
Se puede argumentar que la mayoría de las personas no se encontrarán con este problema. Sin embargo, ya sabemos que las personas tienen cuadrículas muy grandes. No queremos enviar algo que tenga límites en su uso cuando hay un enfoque alternativo.
¿Qué hacemos con los elementos que no tienen sentido en cada método de diseño?
Cuando flexbox y grid se convirtieron en parte de CSS, los desarrolladores a menudo sentían que se comportaban de manera incoherente. La incoherencia que experimentaba se debía a suposiciones arraigadas sobre cómo funcionaba el diseño, basado en el diseño de bloques. Con el tiempo, los desarrolladores comenzaron a comprender los contextos de formato. Cuando cambiamos a un contexto de formato de cuadrícula o flexible, algunos elementos se comportan de manera diferente. Por ejemplo, sabes que, cuando estás en flexbox, no todos los métodos de alineación están disponibles, ya que flexbox es unidimensional.
El agrupamiento de la disposición en cuadrícula rompe este vínculo claro entre el contexto de formato y la disponibilidad de elementos como las propiedades de alineación, que se definen en la especificación de alineación de cuadros por contexto de formato.
Si decidimos abordar el problema de rendimiento descrito anteriormente haciendo que las definiciones de segmentos fijos y mixtos sean ilegales en la disposición en cuadrícula, deberás recordar que un patrón muy común para los diseños de cuadrícula no funciona para la disposición en cuadrícula.
También hay patrones que tendrían sentido en la disposición en espaldera, por ejemplo, grid-template-columns: repeat(auto-fill, max-content), porque no tienes restricciones cruzadas, pero deben seguir siendo no válidas en la cuadrícula. La siguiente es una lista de propiedades que esperamos que se comporten de manera diferente o que tengan diferentes valores válidos.
grid-template-areas: En la disposición en mosaico, solo puedes especificar la fila inicial en la dirección que no es de mosaico.grid-template: La abreviatura debería tener en cuenta todas las diferencias.- Realiza un seguimiento de los valores de tamaño de
grid-template-columnsygrid-template-rowsdebido a las diferencias en los valores legales. grid-auto-flowno se aplica a la disposición en espaldera ymasonry-auto-flowno se aplica a la cuadrícula. Si los combinas, se crearán problemas con elementos no válidos debido al método de diseño en el que te encuentras.- La cuadrícula tiene cuatro propiedades de posición (
grid-column-start, etcétera), mientras que la disposición en galería solo tiene dos. - La cuadrícula puede usar las seis propiedades
justify-*yalign-*, pero Masonry solo usa un subconjunto, como flexbox.
También se requerirá especificar lo que sucede en todos los casos de error nuevos
que causen los desarrolladores que usen un valor que no sea válido en cuadrícula con diseño de cuadrícula
o sin diseño de cuadrícula. Por ejemplo, es válido usar grid-template-columns: masonry o grid-template-rows: masonry, pero no ambos a la vez. ¿Qué sucede si usas ambos a la vez?
Estos detalles deben especificarse para que todos los navegadores hagan lo mismo.
Todo esto se complica desde el punto de vista de la especificación, ahora y en el futuro. Tendremos que asegurarnos de que todo tenga en cuenta la disposición en cuadrícula y si funciona o no en ella. También es confuso desde el punto de
vista de los desarrolladores. ¿Por qué deberías tener en cuenta que, a pesar de usar display: grid, algunas cosas no funcionan debido al uso de masonry?
Una propuesta alternativa
Como ya se mencionó, al equipo de Chrome le gustaría definir la disposición en filas fuera de la especificación de la cuadrícula. Esto no significa que se limitaría a un método de diseño muy simple con tamaños de columna idénticos. Todas las demostraciones de la publicación de WebKit seguirían siendo posibles.
Diseño de mampostería clásico
Cuando la mayoría de las personas piensan en la mampostería, piensan en un diseño con varias columnas de tamaño igual. Esto se definiría con el siguiente CSS, que necesita una línea menos de código que la versión empaquetada de la cuadrícula equivalente.
.masonry {
display: masonry;
masonry-template-tracks: repeat(auto-fill, minmax(14rem, 1fr));
gap: 1rem;
}
Usa el tamaño de la pista de tipo de cuadrícula para diferentes anchos de columna
Además del problema mencionado anteriormente con el tamaño mixto de segmentos intrínsecos y fijos, puedes usar todos los tamaños de segmentos que te gustan de la cuadrícula. Como el ejemplo de la entrada de blog de WebKit, un patrón de columnas estrechas y anchas repetidas.
.masonry {
display: masonry;
masonry-template-tracks: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr);
gap: 1rem;
}
Tamaños adicionales de los segmentos para la disposición en galería
Hay opciones adicionales de tamaño de pista que no permitimos en la cuadrícula debido a que esta es un método de diseño bidimensional. Estos serían útiles en la disposición en cuadrícula, pero sería confuso si no funcionaran en la cuadrícula.
Rellenado automático de segmentos de tamaño max-content
.masonry {
display: masonry;
masonry-template-tracks: repeat(auto-fill, max-content);
gap: 1rem;
}
Rellenar automáticamente segmentos del tamaño de auto, lo que creará segmentos del mismo tamaño, con el tamaño ajustado automáticamente para adaptarse al más grande
.masonry {
display: masonry;
masonry-template-tracks: repeat(auto-fill, auto);
gap: 1rem;
}
Permite que el contenido abarque columnas y coloca elementos en el diseño de mampostería
No hay razón para no tener contenido que abarque columnas en una especificación de muratura distinta. Esto podría usar una propiedad masonry-track, que es una abreviatura de masonry-track-start y masonry-track-end, ya que solo tienes una dimensión para abarcar elementos cuando tienes un diseño de mampostería.
.masonry {
display: masonry;
masonry-template-tracks: repeat(auto-fill, auto);
}
.span-2 {
masonry-track: span 2; /* spans two columns */
}
.placed {
masonry-track: 2 / 5; /* covers tracks 2, 3, and 4 */
}
Submuros o subcuadrículas que adoptan segmentos de mampostería
Esto se podría admitir con una especificación de disposición en mosaico independiente, de nuevo con la salvedad de que no se permiten pistas de tamaño fijo y mixto intrínseco. Se deberá definir exactamente cómo se verá. No vemos motivos por los que esto no funcione.
Conclusión
Nos encantaría llegar a una especificación que se pueda enviar de manera interoperable. Sin embargo, queremos hacerlo de una manera que funcione bien ahora y en el futuro, y en la que los desarrolladores puedan confiar. La única forma de abordar los problemas de rendimiento descritos sería empeorar el segundo problema, que es tener partes de la cuadrícula ilegales en la mampostería. No creemos que sea una buena solución, en especial cuando es posible tener todas las funciones de cuadrícula que deseas y, al mismo tiempo, mantener las diferencias claramente separadas.
Si tienes comentarios, únete al debate en el problema 9041.
Gracias a Bramus, Tab Atkins-Bittner, Una Kravets, Ian Kilpatrick y Chris Harrelson por revisar esta publicación y las conversaciones que la inspiraron.