Grid-Spuren
Eine Grid-Spur ist der Raum zwischen zwei benachbarten Gitterlinien. Sie werden im expliziten Gitter durch die Verwendung der Eigenschaften grid-template-columns und grid-template-rows oder der Abkürzungen grid oder grid-template definiert. Spuren werden auch im impliziten Gitter erstellt, indem ein Gitterelement außerhalb der im expliziten Gitter erstellten Spuren positioniert wird.
Das untenstehende Bild zeigt die erste Spur einer Zeile in einem Gitter.
Spurgrößen im expliziten Gitter
Beim Definieren von Grid-Spuren mit grid-template-columns und grid-template-rows können Sie jede Längeneinheit sowie die Flex-Einheit fr verwenden, die einen Teil des verfügbaren Raums im Gitter-Container angibt.
Beispiel
Das folgende Beispiel zeigt ein Gitter mit drei Spuren, eine mit 200 Pixeln, die zweite mit 1fr und die dritte mit 3fr. Sobald die 200 Pixel vom im Gitter-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>
Spurgrößen im impliziten Gitter
Im impliziten Gitter erstellte Spuren sind standardmäßig automatisch dimensioniert, jedoch können Sie eine Größe für diese Spuren mit den Eigenschaften grid-auto-rows und grid-auto-columns definieren.