CSS Masonry Grid con FlexBox u otros diseños

creando un diseño de cuadrícula en CSS donde los elementos tienen alturas variables pueden ser desafiantes. Si bien Flexbox proporciona flexibilidad, es posible que no cumpla con el requisito de que los elementos más nuevos se alineen con la parte inferior del anterior.

introduciendo el diseño de la cuadrícula CSS

en lugar de FlexBox, considere aprovechar el diseño de la cuadrícula CSS para este propósito. Ofrece una forma más robusta e intuitiva de lograr una cuadrícula de mampostería:

html estructura:

  
  
  ...

css:

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

SoStSeS shellSeS como un diseño de cuadrícula. píxeles.

Especifica el espaciado entre elementos de la cuadrícula.
1. Grid-Template-columns:
define cuántas columnas están en la cuadrícula (autocillada) y el ancho mínimo para cada columna (mínimo (30%, 30%, 30%, 1fr).
2. Grid-Row: span x:
indica que el elemento debe ocupar x número de filas de cuadrícula.