Rasterspuren Verstehen
Rasterspuren sind die Zeilen und Spalten, die die Struktur Ihres Rasters definieren. Jede Spur kann mit verschiedenen Einheiten dimensioniert werden: fr-Einheiten verteilen den verbleibenden Platz proportional, px setzt feste Dimensionen und auto passt die Spuren basierend auf dem Inhalt an. Die repeat()-Funktion vereinfacht sich wiederholende Spurdefinitionen.
Die fr-Einheit Erklaert
Die fr-Einheit repraesentiert einen Bruchteil des verfuegbaren Platzes im Raster-Container. Wenn Sie drei Spalten als 1fr 2fr 1fr definieren, nimmt die mittlere Spalte doppelt so viel Platz ein wie jede aeussere Spalte. Diese Einheit macht die Erstellung proportionaler Layouts intuitiv und vermeidet komplexe Prozentberechnungen.
Abstand und Trennung
Die gap-Eigenschaft steuert den Abstand zwischen Rasterzellen, ohne die aeusseren Raender zu beeinflussen. Frueher als grid-gap bezeichnet, funktioniert die Kurzschreibweise gap sowohl in Grid als auch in Flexbox. Sie koennen Zeilen- und Spaltenabstaende unabhaengig mit row-gap und column-gap fuer praezisere Abstandskontrolle festlegen.
Gaengige Layout-Muster
Das Holy-Grail-Layout verwendet eine Kopfzeile, die alle Spalten ueberspannt, einen dreispaltigen Mittelteil und eine Fusszeile in voller Breite. Dashboard-Layouts verfuegen ueber eine feste Seitenleiste mit einem flexiblen Inhaltsraster. Galerie-Layouts verwenden gleiche fr-Einheiten fuer einheitliche Zellen.
