grade de alvenaria CSS com flexbox ou outros layouts

criando um layout de grade no CSS onde os elementos têm alturas variadas podem ser desafiadoras. Embora o Flexbox forneça flexibilidade, pode não atender ao requisito de que os elementos mais recentes se alinhem à parte inferior do anterior. Oferece uma maneira mais robusta e intuitiva de obter uma grade de alvenaria:

html estrutura:

...

css:

  
  
  ...

explicação:

grid-container {
  display: grid;                                 
  grid-auto-rows: 50px;                         
  grid-gap: 10px;                               
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));  
}

[short] {
  grid-row: span 1;                                
  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;
}

Display: grid: inicializa o contêiner como um layout da grade: 50px: