Primeros pasos hacia un posible diseño de mampostería CSS

No está al nivel de demanda como, por ejemplo, las consultas de contenedores, pero poder crear diseños “de mamposterí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 donde los elementos de tamaño desigual se colocan en filas irregulares. Algo así como una típica pared de ladrillos volteada de lado.

El diseño por sí solo ya se puede lograr solo en CSS, pero con una gran advertencia: los elementos no están organizados en filas, sino en columnas, lo que a menudo es un factor decisivo para la gente.

/* People usually don't want this */1  4  6  82     73  5     9

/* They want this *.1  2  3  45  6     78     9

Si quieres esa cosa de filas irregulares y el orden de fuente horizontal, estás en territorio de JavaScript. Hasta ahora, es decir, ya que Firefox implementó esto bajo una bandera de función en Firefox Nightly, como parte de la cuadrícula CSS.

Mats Palmgren :

Una implementación de esta propuesta ya está disponible en Firefox Nightly. Está deshabilitado de forma predeterminada, por lo que debe cargar about:configy configurar la preferencia layout.css.grid-template-masonry-value.enabledpara truehabilitarlo (escriba “mampostería” en el cuadro de búsqueda de 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…

Grid 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. Normalmente tenemos filas definidas, 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, siento que este es un modo de diseño relativamente especializado y en realidad no es una cuadrícula en absoluto. Es más parecido al diseño flexible que al diseño de cuadrícula.

Al colocar este método de diseño en la específica Grid, me preocupa que luego nos veamos obligados a admitir la funcionalidad Masonry con cualquier otra adición a Grid.

Nada de esto es definitivo todavía y hay una discusión activa al respecto en el Grupo de Trabajo de CSS.

Como dijo Jen:

Esta es una implementación experimental que se está discutiendo como una posible especificación CSS. Aún NO es oficial y probablemente cambiará. No escriba publicaciones de blog diciendo que esto definitivamente existe. No es una cosa. Aún no. Es un experimento. Un prototipo. Si tiene alguna idea, participe en el CSSWG.

¿Houdini?

La última vez que habló de 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 crear prototipos en el navegador y finalmente sacarse de Houdini, o si las ideas simplemente deben permanecer en Houdini, o qué.