Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
Grid-Spuren
EineGrid-Spur ist der Raum zwischen zwei benachbartenGitterlinien. Sie werden imexpliziten Gitter durch die Verwendung der Eigenschaftengrid-template-columns undgrid-template-rows oder der Abkürzungengrid odergrid-template definiert. Spuren werden auch imimpliziten 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 mitgrid-template-columns undgrid-template-rows können Sie jede Längeneinheit sowie die Flex-Einheitfr 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.
* { box-sizing: border-box;}.wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6;}.wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f;}.wrapper { display: grid; grid-template-columns: 200px 1fr 3fr;}<div> <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 Eigenschaftengrid-auto-rows undgrid-auto-columns definieren.