Heim >Web-Frontend >CSS-Tutorial >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 :
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!