No está al nivel de demanda como, digamos, consultas de contenedor, pero poder hacer diseños de “albañilería” en CSS ha sido una gran demanda para los desarrolladores de CSS durante mucho tiempo. La mampostería es ese tipo de diseño en el que los elementos de tamaño desigual se colocan en filas irregulares. Sorta como una típica pared de ladrillos volteada de lado.
El diseño solo se puede lograr solo en CSS, pero con una gran advertencia: los elementos no están organizados en filas, están organizados en columnas, lo que a menudo es un factor decisivo para la gente.
/* People usually don't want this */
1 4 6 8
2 7
3 5 9/* They want this *.
1 2 3 4
5 6 7
8 9Si quieres esa fila irregular y un orden de fuente horizontal, estás en territorio de JavaScript. Hasta ahora, es decir, cuando Firefox implementó esto bajo una bandera de función en Firefox Nightly, como parte de la cuadrícula CSS.
Alfombrillas Palmgren:
Una implementación de esta propuesta ya está disponible en Firefox Nightly. Está deshabilitado de forma predeterminada, por lo que debe cargar about:config y establecer la preferencia layout.css.grid-template-masonry-value.enabled a true para habilitarlo (escriba “masonry” en el cuadro de búsqueda en esa página y le mostrará esa preferencia).
Jen Simmons ya ha creado algunas demostraciones:
¿Es esto realmente una cuadrícula?
Un poco de rechazo por parte de Rachel Andrew …
La cuadrícula no es mampostería, porque es una cuadrícula con filas y columnas estrictas. Si echas otro vistazo al diseño creado por Masonry, no tenemos filas y columnas estrictas. Por lo general, hemos definido filas, pero las columnas actúan más como un diseño flexible o Multicol. La diferencia clave entre el diseño que obtiene con Multicol y un diseño de mampostería es que en Multicol los elementos se muestran por columna. Normalmente, en un diseño de mampostería, desea que se muestren en filas.
[…]
Hablando personalmente, no soy un gran admirador de que esto sea parte de la especificación Grid. Ciertamente es convincente a primera vista, sin embargo, creo que este es un modo de diseño relativamente especializado y en realidad no es una cuadrícula en absoluto. Es más parecido a un diseño flexible que a un diseño de cuadrícula.
Al colocar este método de diseño en la especificación de Grid, me preocupa que luego nos limitemos a la necesidad de admitir la funcionalidad de Masonry con cualquier otra adición a Grid.
Nada de esto es definitivo todavía, y hay un debate activo en el Grupo de Trabajo de CSS al respecto.
Como dijo Jen:
Esta es una implementación experimental, que se está discutiendo como una posible especificación de CSS. Todavía NO es oficial y probablemente cambiará. No escribas publicaciones de blog diciendo que esto es definitivamente una cosa. No es nada. Aún no. Es un experimento Un prototipo. Si tiene alguna idea, intervenga en el CSSWG.
Houdini?
La última vez que se habló sobre la mampostería nativa, se mezcló con la idea de que CSS Layout API, como parte de Houdini, podría hacer esto. Eso es una cosa, como puede ver al abrir esta demostración (repositorio) en Chrome Canary.
No estoy totalmente al tanto de si Houdini está destinado a ser una cosa para que ideas como esta puedan ser prototipadas en el navegador y finalmente moverse fuera de Houdini, o si las ideas deberían permanecer en Houdini, o qué.