Grid Tracks
Ein Grid Track ist der Raum zwischen zwei benachbarten Grid Lines. Diese werden im expliziten Grid durch die Verwendung der grid-template-columns und grid-template-rows Eigenschaften oder der Kurzformen grid oder grid-template definiert. Tracks werden auch im impliziten Grid erstellt, indem ein Grid-Item außerhalb der im expliziten Grid erstellten Tracks positioniert wird.
Das folgende Bild zeigt den ersten Zeilen-Track auf einem Grid.
Track-Sizing im expliziten Grid
Beim Definieren von Grid Tracks mit grid-template-columns und grid-template-rows können Sie jede beliebige Längeneinheit verwenden sowie die Flex-Einheit fr, die einen Anteil des verfügbaren Platzes im Grid-Container angibt.
Beispiel
Das untenstehende Beispiel demonstriert ein Grid mit drei Spaltentracks, einer mit 200 Pixeln, der zweite mit 1fr, der dritte mit 3fr. Nachdem die 200 Pixel vom verfügbaren Raum im Grid-Container abgezogen wurden, wird der verbleibende Raum durch 4 geteilt. Ein Teil wird Spalte 2 zugewiesen, 3 Teile der Spalte 3.
.wrapper {
display: grid;
grid-template-columns: 200px 1fr 3fr;
}
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
Track-Sizing im impliziten Grid
Die im impliziten Grid erstellten Tracks werden standardmäßig automatisch dimensioniert, jedoch können Sie eine Größe für diese Tracks mit den Eigenschaften grid-auto-rows und grid-auto-columns definieren.