Wie kann ich mit CSS Grid Layout ein Mauerwerksraster mit Elementen unterschiedlicher Höhe erstellen?

Mauerwerksraster mit CSS-Rasterlayout erstellen

In CSS kann es eine Herausforderung sein, einen Rastereffekt mit Elementen unterschiedlicher Höhe zu erzielen. Das kürzlich eingeführte CSS Grid Layout bietet jedoch eine leistungsstarke Lösung.

CSS Grid Layout verwenden

Um ein Mauerwerksraster mit CSS Grid Layout zu erstellen, können Sie diese Schritte befolgen :

1. Definieren Sie den Rastercontainer: Verwenden Sie die Eigenschaft display: Grid, um ein Raster zu erstellen Container.
2. Legen Sie die automatische Zeilenhöhe fest: Verwenden Sie die Eigenschaft „grid-auto-rows“, um die Standardhöhe für jede Zeile im Raster anzugeben. Dadurch wird sichergestellt, dass Elemente in verschiedenen Zeilen vertikal den gleichen Abstand haben.
3. Abstand anpassen: Verwenden Sie die Eigenschaft „grid-gap“, um den Abstand zwischen Rasterelementen sowohl horizontal als auch vertikal festzulegen.
4. Spaltengrößen definieren: Verwenden Sie die Eigenschaft „grid-template-columns“, um die Größe der Spalten im Raster festzulegen. Hier stellen wir die automatische Füllung ein, um ein Raster mit flexiblen Spaltengrößen zu erstellen, während minmax(30%, 1fr) sicherstellt, dass die Spalten mindestens 30 % breit sind und nach Bedarf erweitert werden können.

Mauerwerksraster implementieren

Hier ist ein Beispiel-HTML- und CSS-Code zum Erstellen eines Mauerwerks Raster:

<grid-container>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
</grid-container>

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

Dieser Code erstellt ein Mauerwerksgitter, in dem Elemente unterschiedlicher Höhe automatisch in einer gleichmäßig verteilten, gitterartigen Struktur angeordnet werden.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS Grid Layout ein Mauerwerksraster mit Elementen unterschiedlicher Höhe erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!