Crie uma grade de alvenaria com o flexbox (ou outro CSS)

Eu gostaria de obter um efeito de grade no CSS com elementos que tenham a mesma largura em tamanho, mas não em altura. Eu gostaria que o elemento abaixo estivesse sempre a 50px do fundo, o que quer que seja o próximo.

Eu tentei com carros alegóricos, mas esse bug. Então eu tentei com Flex, mas ainda não faz o que eu quero.

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

O que eu gostaria:

insira a descrição da imagem aqui

O que eu tenho:

insira a descrição da imagem aqui

Experimente o novo layout de grade 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; } 
                                   

Eu sugeriria um layout de coluna. Ele pode ser facilmente responsivo ao seu gosto declarando a column-width column-count . O benefício em relação à solução da Emonadeo (sem ofensa) é que ela ainda permanece responsiva sem nenhuma marcação adicional adicionada. A desvantagem é que os elementos são classificados primeiro em colunas, não em linhas.

 .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

Eu sugiro que você coloque cada coluna em um div separado. Dessa forma, o flexbox não o força em um layout semelhante a uma mesa.

Mesmo que eu usei alturas fixas no trecho, ele deveria funcionar dinamicamente sem nenhum problema

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