Puesto al día el 29 de abril de 2020.
html
<main class="masoneria">
<div class="titulo">
<h3>Título 1</h3>
<p>Texto del elemento 1.</p>
</div>
<div class="titulo">
<h3>Título 2</h3>
<p>Texto del elemento 2.</p>
</div>
</main>
mediante columnas
css
main.masoneria
{
column-count: 4;
column-gap: 1em;
}
div.titulo
{
display: inline-block;
margin: 0.6em 1%;
outline: #DDD solid 3px;
padding: 3%;
text-align: center;
width: 94%;
}
div.titulo img
{
max-width: 100%;
}
div.titulo h3
{
word-wrap: break-word;
}
div.titulo p
{
text-align: left;
}
claves
main.masoneria- column-count equivale al número de columnas en que se divide el elemento padre
main. - column-gap resulta en el espacio libre entre las columnas.
div.titulo- display: inline-block (no vale ni inline, ni block).
- width de 94% ó de 100% si no hay padding que valga.
div.titulo h3- word-wrap con break-word para evitar que el texto de
h3 desborde el ancho de div.titulo.
comportamiento
- los bloques se ordenan de arriba a abajo: el bloque 1 encima del 2 y no el uno junto al otro. de esta forma, en la primera línea, se mostrarían (por ejemplo) los bloques 1 | 4 | 7 y no los bloques 1 | 2 | 3.
- si se añaden nuevos bloques a
main.masoneria mediante javascript, éstos se dispondrán al final de la última columna (empujando, claro, el resto hacia arriba).
mediante grid
css
main.masoneria
{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1.5em;
}
div.titulo
{
outline: #DDD solid 3px;
padding: 3%;
text-align: center;
}
div.titulo img
{
max-width: 100%;
}
div.titulo h3
{
word-wrap: break-word;
}
div.titulo p
{
text-align: left;
}
claves
main.masoneria- display: grid convierte a los hijos directos de
main (en este caso, los dos div.titulo) en elementos de una tabla. - la tabla, en este ejemplo, se define mediante grid-template-columns: tiene dos columnas que son exactamente del mismo tamaño (1fr).
- grid-gap fija el espacio o margen entre las filas y las columnas.
comportamiento
- los bloques se ordenan de izquierda a derecha: 1 | 2 | 3.
- los elementos de cada fila se disponen todos a la misma altura: si dichos elementos no tienen la misma altura, quedarán espacios en blanco entre las distintas filas.
- si se añaden nuevos bloques a
main.masoneria mediante javascript, éstos se dispondrán al final de la última fila (siguiendo el orden de izquierda a derecha).
fuentes