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 Erklärt
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 können Zeilen- und Spaltenabstaende unabhaengig mit row-gap und column-gap für praezisere Abstandskontrolle festlegen.
Gängige Layout-Muster
Das Holy-Grail-Layout verwendet eine Kopfzeile, die alle Spalten überspannt, einen dreispaltigen Mittelteil und eine Fusszeile in voller Breite. Dashboard-Layouts verfuegen über eine feste Seitenleiste mit einem flexiblen Inhaltsraster. Galerie-Layouts verwenden gleiche fr-Einheiten für einheitliche Zellen.
