El diseño de mampostería, en la web, es cuando los elementos de un tamaño desigual se colocan de manera que no haya espacios desiguales. Supongo que el término fue acuñado (o al menos popularizado) para la web por David DeSandro debido a su popular biblioteca Masonry JavaScript, que existe desde 2010.
Biblioteca JavaScript. Nada en contra de JavaScript, pero es comprensible que no queramos apoyarnos en él para hacer el diseño. ¿Hay algo que podamos hacer directamente en CSS estos días? Sorta.
¿Está bien el orden vertical con fondos irregulares?
Si es así, las columnas CSS funcionarán bien.
Flexbox también puede hacer columnas verticales con terminaciones irregulares
Pero no es tan inteligente, porque necesitará establecer una altura de algún tipo para que envuelva las columnas. También tendrá que ser explícito sobre los anchos en lugar de que sea él quien decida las columnas por usted.
Pero es factible y separa automáticamente los espacios si hay espacio.
¿Necesita un borde inferior limpio? Una combinación de Flexbox / JavaScript puede ayudar.
Jamie Perkins escribió originalmente esto, luego Janosh Riebesell lo reescribió y ahora lo estoy portando aquí.
Se mete totalmente con el orden y requiere que los niños sean flexibles con respecto a su altura, pero funciona:
¿Está bien la mampostería de línea horizontal?
Si lo que busca es solo el aspecto desigual de ladrillo, entonces la mampostería horizontal es mucho más fácil. Probablemente incluso podrías flotar cosas si no te importa el borde irregular. Si quieres mantenerlo en un bloque … flexbox con permitido flex-grow es el boleto.
Pensarías que la cuadrícula CSS podría ayudar
La cuadrícula CSS es muy sorprendente y útil en la vida cotidiana de un desarrollador de CSS, pero en realidad no está diseñada para diseños de estilo de mampostería. La cuadrícula CSS se trata de definir líneas y colocar cosas a lo largo de esas líneas, donde la mampostería consiste en dejar que los elementos terminen donde pueden, pero aún ejerciendo cierta influencia posicional.
Balázs Sziklai tiene un buen ejemplo de cuadrículas de flujo automático que se apilan muy bien juntas, con un orden horizontal bastante bueno:
Pero puedes ver lo estrictas que son las líneas. ¡Sin embargo, hay una manera!
Grid + intervalos de filas manipulados por JavaScript
Andy Barefoot escribió una gran guía. El truco consiste en configurar filas de cuadrícula repetidas que sean bastante cortas, dejando que los elementos caigan en la cuadrícula horizontalmente como puedan, luego ajustando sus alturas para que coincidan con la cuadrícula con algunas matemáticas bastante ligeras para calcular cuántas filas deben abarcar.
Rahul Arora también siguió este camino:
Ambos son geniales en el sentido de que el orden DOM y el orden visual son sensatos.
Elementos ordenados en un diseño Flexbox
Normalmente, cuando piensas en usar order para mover cosas en un diseño de cuadrícula o caja flexible, está en un territorio peligroso, ya que el orden de tabulación probablemente seguirá el orden DOM, que ya no coincide con el orden de tabulación esperado porque visualmente las cosas se han movido por todas partes. En esta demostración de Diederik van Leeuwen, order se usa para hacer lo que comienza como un flexbox orientado a columnas pero manipulado para que se ordene horizontalmente con algo de JavaScript inteligente.
Elementos desplazados al DOM en un diseño de columnas CSS
Lo que la gente generalmente quiere es apilar columnas (alturas variadas en los elementos), pero con orden horizontal. La última demostración de cuadrícula anterior lo maneja bastante bien, pero no es la única forma.
Jesse Korzan lo abordó con columnas CSS. También necesita JavaScript para hacerlo. En este caso, desplaza los elementos del DOM para ordenarlos de izquierda a derecha mientras proporciona una pila horizontal utilizando un diseño de columnas CSS. Esto introduce un pequeño problema de accesibilidad ya que el orden visual (de izquierda a derecha) y el orden de las fuentes (de arriba a abajo) son muy diferentes & dash; aunque quizás se pueda arreglar con programática tabindex?
También está la biblioteca original y variaciones.
Flota lejos, mis bellezas.
Y es una versión más nueva y más moderna: ¡Colcade!
Y aquí está MagicGrid, en el que un diseño de caja flexible se manipula ligeramente con una biblioteca de JavaScript:
CSS Houdini!
Houdini se divide en diferentes API que se envían en diferentes momentos. Las API Paint y Typed OM son las más avanzadas, pero hay algo de soporte para Layout API, que es increíblemente emocionante ya que abre posibilidades como el diseño de mampostería.
Aquí hay una demostración de Google: