Wie erstelle ich in CSS ein Mauerwerksrasterlayout mit unterschiedlichen Höhen?

CSS-Mauerwerksraster mit Flexbox oder anderen Layouts

Das Erstellen eines Rasterlayouts in CSS, bei dem Elemente unterschiedliche Höhen haben, kann eine Herausforderung sein. Obwohl Flexbox Flexibilität bietet, erfüllt es möglicherweise nicht die Anforderung, dass neuere Elemente am unteren Rand des vorherigen ausgerichtet sind.

Einführung des CSS-Rasterlayouts

Anstelle von Flexbox sollten Sie dies in Betracht ziehen Zu diesem Zweck wird das CSS-Grid-Layout genutzt. Es bietet eine robustere und intuitivere Möglichkeit, ein Mauerwerksraster zu erstellen:

HTML Struktur:

<grid-container>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  ...
</grid-container>

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

Erklärung:

1. display: grid: Initialisiert den Container als Raster Layout.
2. grid-auto-rows: 50px: Setzt die Höhe jeder Rasterzeile auf 50 Pixel.
3. grid-gap: 10px: Gibt den Abstand zwischen den Rastern an Elemente.
4. grid-template-columns: Definiert, wie viele Spalten sich im Raster befinden (automatisches Ausfüllen) und die Mindestbreite für jede Spalte (Mindestinhalt: 30 %, 1 Fr). .
5. grid-row: span X: Gibt an, dass das Element X im Raster belegen soll Zeilen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich in CSS ein Mauerwerksrasterlayout mit unterschiedlichen Höhen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!