Cree una cuadrícula de mampostería con flexbox(u otro CSS)

css3 multiple-columns

Question

Me gustaría lograr un efecto de cuadrícula en CSS con elementos que tengan el mismo ancho en tamaño pero no en altura. Me gustaría que el elemento debajo esté siempre a 50 px del inferior, lo que sea que siga.

Lo intenté con carrozas, pero ese error. Así que intenté con Flex, pero todavía no hace lo que quiero.

.container
display: flex
flex-wrap wrap
align-content flex-start
align-items flex-start

Lo que me gustaría:

Lo que tengo:

Answer 1

Le sugiero que ponga cada columna en un div separado. De esa forma, flexbox no lo fuerza a un diseño similar a una tabla.

Aunque utilicé alturas fijas en el fragmento, debería funcionar dinámicamente sin ningún problema

.container {
display: flex;
}
.col {
flex: 1;
}
.col div {
background-color: #2C2F33;
margin: 16px 8px;
}

<div class="container">
<div class="col">
<div style="height: 200px"></div>
<div style="height: 100px"></div>
<div style="height: 200px"></div>
</div>
<div class="col">
<div style="height: 150px"></div>
<div style="height: 250px"></div>
<div style="height: 200px"></div>
</div>
<div class="col">
<div style="height: 300px"></div>
<div style="height: 150px"></div>
<div style="height: 100px"></div>
</div>
</div>

Answer 2

Pruebe el nuevo diseño de cuadrícula CSS :

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-container>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item tall></grid-item>
<grid-item short></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-item tallest></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>

jsFiddle demo

Cómo funciona:

1. Establecer un contenedor de cuadrícula a nivel de bloque.
2. La propiedad grid-auto-rows establece la altura de las filas generadas automáticamente. En esta cuadrícula, cada fila mide 50 px de alto.
3. La propiedad grid-gap es una abreviatura de grid-column-gap y grid-row-gap . Esta regla establece una brecha de 10 píxeles entre los elementos de la cuadrícula. (No se aplica al área entre los artículos y el contenedor).

4. La propiedad grid-template-columns establece el ancho de las columnas definidas explícitamente.

   La notación de repeat define un patrón de columnas (o filas) repetidas.

   La auto-fill 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 flex-wrap: wrap del diseño flex-wrap: wrap ).

   La función minmax() 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 unidad fr representa una fracción del espacio libre en el contenedor de la cuadrícula. Es comparable a la propiedad flex-grow flexbox.

5. Con grid-row y span les 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

Función de superposición de cuadrícula genial 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

Answer 3

Sugeriría un diseño de columna. Se puede hacer que responda fácilmente a su gusto declarando tanto column-width column-count . El beneficio sobre la solución de Emonadeo (sin ofender) es que sigue respondiendo sin ningún margen adicional agregado. El inconveniente es que los elementos se ordenan primero en columnas, no en filas.

.container {
/* min width of a single column */
column-width: 140px;
/* maximum amount of columns */
column-count: 4;
/* gap between the columns */
column-gap: 16px;
}
.container div {
/* important so a single div never gets distributed between columns */
break-inside: avoid-column;
background-color: #2C2F33;
margin-bottom: 16px;
color:white;
}

<div class="container">
<div style="height: 200px">a</div>
<div style="height: 100px">b</div>
<div style="height: 200px">c</div>
<div style="height: 150px">d</div>
<div style="height: 250px">e</div>
<div style="height: 200px">f</div>
<div style="height: 300px">g</div>
<div style="height: 150px">h</div>
<div style="height: 100px">i</div>
</div>