css Mauerwerk mit Flexbox oder anderen Layouts

Erstellen eines Gitterlayouts in CSS, bei dem Elemente unterschiedliche Höhen haben können. Während Flexbox Flexibilität bietet, erfüllt es möglicherweise nicht die Forderung, dass neuere Elemente mit dem Boden des vorherigen übereinstimmen. Es bietet eine robustere und intuitivere Möglichkeit, ein Mauerwerk zu erreichen:

html Struktur:

...

css:

  
  
  ...

Erläuterung:

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

Anzeige: Grid: initialisiert den Container als Grid-Layout. Pixel.

grid-gap: 10px:
1. Gibt den Abstand zwischen Grid-Elementen an.
grid-template-säulen:
2. definiert, wie viele Spalten in der Raste (auto-fill) und die minimale Breite für die Spalte (minimum) und die minimale Breite (minimum) und die Breite von minimum (minimum fordere forway) (min-content: 30%, 30%, die minimum for-width for je colcal 1Fr).
grid-row: span x:
3. zeigt an, dass das Element x Anzahl der Rasterreihen besetzen sollte.