Crear una grilla de mampostería con flexbox (u otro CSS)

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

Intenté con carrozas, pero ese error. Así que lo 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:

enter image description here

Lo que tengo:

enter image description here

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; } 
                                   

Sugeriría un diseño de columna. Se puede responder fácilmente a su gusto al declarar tanto column-width column-count . El beneficio sobre la solución de Emonadeo (sin ofender) es que sigue siendo receptivo sin agregar ningún marcado adicional. 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; } 
 
a
b
c
d
e
f
g
h
i

Sugiero que pongas cada columna en un div separado. De esta manera, Flexbox no lo fuerza a un diseño similar a una mesa.

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; }