Grid-Strecken
Eine Grid-Strecke ist der Raum zwischen zwei benachbarten Grid-Linien. Sie werden im expliziten Grid durch die Verwendung der Eigenschaften grid-template-columns und grid-template-rows oder die Kurzschreibweisen grid oder grid-template definiert. Strecken werden auch im impliziten Grid erstellt, indem ein Grid-Element außerhalb der im expliziten Grid erstellten Strecken positioniert wird.
Das folgende Bild zeigt die erste Reihenstrecke in einem Grid.
Strecken-Größenbestimmung im expliziten Grid
Beim Definieren von Grid-Strecken mit grid-template-columns und grid-template-rows können Sie jede Längeneinheit verwenden und auch die Flex-Einheit fr, die einen Teil des verfügbaren Raums im Grid-Container angibt.
Beispiel
Das folgende Beispiel demonstriert ein Grid mit drei Spaltenstrecken: eine von 200 Pixel, die zweite von 1fr, die dritte von 3fr. Nachdem die 200 Pixel vom im Grid-Container verfügbaren Raum abgezogen wurden, wird der verbleibende Raum durch 4 geteilt. Ein Teil wird der 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>
Strecken-Größenbestimmung im impliziten Grid
Strecken, die im impliziten Grid erstellt werden, sind standardmäßig automatisch dimensioniert, jedoch können Sie eine Größe für diese Strecken mithilfe der Eigenschaften grid-auto-rows und grid-auto-columns definieren.