Flexbox
Un diseño de mampostería dinámico no es posible con flexbox, al menos no de una manera limpia y eficiente.
Flexbox es un sistema de diseño unidimensional. Esto significa que puede alinear elementos a lo largo de líneas horizontales O verticales. Un elemento flexible se limita a su fila o columna.
Un verdadero sistema de cuadrícula es bidimensional, lo que significa que puede alinear elementos a lo largo de líneas horizontales Y verticales. Los elementos de contenido pueden abarcar filas y columnas simultáneamente, lo que los elementos flexibles no pueden hacer.
Es por eso que flexbox tiene una capacidad limitada para construir redes. También es una razón por la cual el W3C ha desarrollado otra tecnología CSS3, Grid Layout .
row wrap
En un contenedor flexible con flex-flow: row wrap, los elementos flexibles deben ajustarse a nuevas filas .
Esto significa que un elemento flexible no puede ajustarse debajo de otro elemento en la misma fila .
Observe arriba cómo div # 3 se ajusta debajo de div # 1 , creando una nueva fila. No puede envolverse debajo del div # 2 .
Como resultado, cuando los elementos no son los más altos de la fila, queda espacio en blanco, creando huecos antiestéticos.
column wrap
Si cambia a flex-flow: column wrap, un diseño similar a una cuadrícula es más alcanzable. Sin embargo, un contenedor de dirección de columna tiene cuatro problemas potenciales desde el principio:
- Los elementos flexibles fluyen verticalmente, no horizontalmente (como necesita en este caso).
- El contenedor se expande horizontalmente, no verticalmente (como el diseño de Pinterest).
- Requiere que el contenedor tenga una altura fija, para que los artículos sepan dónde envolver.
- Al momento de escribir este artículo, tiene una deficiencia en todos los principales navegadores donde el contenedor no se expande para acomodar columnas adicionales .
Como resultado, un contenedor de dirección de columna no es una opción en este caso, y en muchos otros casos.
CSS Grid con dimensiones de elementos indefinidas
El diseño de cuadrícula sería una solución perfecta para su problema si las diferentes alturas de los elementos de contenido pudieran predeterminarse . Todos los demás requisitos están dentro de la capacidad de Grid.
Se debe conocer el ancho y la altura de los elementos de la cuadrícula para cerrar las brechas con los elementos circundantes.
Entonces, Grid, que es el mejor CSS que tiene para ofrecer para construir un diseño de mampostería de flujo horizontal, se queda corto en este caso.
De hecho, hasta que llegue una tecnología CSS con la capacidad de cerrar automáticamente las brechas, CSS en general no tiene solución. Algo como esto probablemente requeriría refluir el documento, por lo que no estoy seguro de cuán útil o eficiente sería.
Necesitarás un guión.
Las soluciones de JavaScript tienden a utilizar un posicionamiento absoluto, que elimina elementos de contenido del flujo de documentos para reorganizarlos sin espacios. Aquí hay dos ejemplos:
CSS Grid con dimensiones de elementos definidas
Para diseños donde se conoce el ancho y alto de los elementos de contenido, aquí hay un diseño de mampostería que fluye horizontalmente en CSS puro:
grid-container {
display: grid; /* 1 */
grid-auto-rows: 50px; /* 2 */
grid-gap: 10px; /* 3 */
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); /* 4 */
}
[short] {
grid-row: span 1; /* 5 */
background-color: green;
}
[tall] {
grid-row: span 2;
background-color: crimson;
}
[taller] {
grid-row: span 3;
background-color: blue;
}
[tallest] {
grid-row: span 4;
background-color: gray;
}
grid-item {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3em;
font-weight: bold;
color: white;
}
<grid-container>
<grid-item short>01</grid-item>
<grid-item short>02</grid-item>
<grid-item tall>03</grid-item>
<grid-item tall>04</grid-item>
<grid-item short>05</grid-item>
<grid-item taller>06</grid-item>
<grid-item short>07</grid-item>
<grid-item tallest>08</grid-item>
<grid-item tall>09</grid-item>
<grid-item short>10</grid-item>
<grid-item tallest>etc.</grid-item>
<grid-item tall></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
</grid-container>
Cómo funciona
- Establecer un contenedor de cuadrícula a nivel de bloque. (
inline-gridsería la otra opción)
- La
grid-auto-rowspropiedad establece la altura de las filas generadas automáticamente. En esta cuadrícula, cada fila mide 50 px de alto.
- La
grid-gappropiedad es una abreviatura de grid-column-gapy grid-row-gap. Esta regla establece un espacio de 10 píxeles entre los elementos de la cuadrícula. (No se aplica al área entre los artículos y el contenedor).
La grid-template-columnspropiedad establece el ancho de las columnas definidas explícitamente.
La repeatnotación define un patrón de columnas repetidas (o filas).
La auto-fillfunción le dice a la cuadrícula que alinee tantas columnas (o filas) como sea posible sin desbordar el contenedor. (Esto puede crear un comportamiento similar al del diseño flexibleflex-wrap: wrap ).
La minmax()función establece un rango de tamaño mínimo y máximo para cada columna (o fila). En el código anterior, el ancho de cada columna será un mínimo del 30% del contenedor y un máximo de cualquier espacio libre disponible.
La frunidad representa una fracción del espacio libre en el contenedor de la cuadrícula. Es comparable a la flex-growpropiedad de flexbox .
Con grid-rowy spanles estamos diciendo a los elementos de la cuadrícula cuántas filas deben abarcar.
Soporte de navegador para CSS Grid
- Chrome: soporte completo a partir del 8 de marzo de 2017 (versión 57)
- Firefox: soporte completo a partir del 6 de marzo de 2017 (versión 52)
- Safari: soporte completo a partir del 26 de marzo de 2017 (versión 10.1)
- Edge: soporte completo a partir del 16 de octubre de 2017 (versión 16)
- IE11: no se admite la especificación actual; admite versión obsoleta
Aquí está la imagen completa: http://caniuse.com/#search=grid
Genial función de superposición de cuadrícula en Firefox
En las herramientas de desarrollo de Firefox, cuando inspeccionas el contenedor de cuadrícula, hay un pequeño icono de cuadrícula en la declaración CSS. Al hacer clic, muestra un esquema de su cuadrícula en la página.
Más detalles aquí: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
