Share
Bisher haben sich unsere CSS-Grid-Tutorials stark darauf konzentriert explizit Werte-Spurgrößen, die wir explizit definiert haben. Wir haben Zeilen verwendet, die 200px hoch sind, oder vielleicht Spalten, die 1 Fr breit sind, und wir haben explizit angegeben, wie viele davon wir wollen. Was aber, wenn wir nicht wissen (oder wollen), wie viele Tracks wir wollen? Das ist wo implizit Werte kommen ins Spiel - lassen Sie uns einen Blick darauf werfen.
Hier ist ein Grundraster, dem Sie folgen können. Es gibt uns einen Gittercontainer mit 9 Gitterelementen. Es wurden noch keine Spaltenbreiten oder -mengen definiert, sodass jedes Element die maximal verfügbare Breite ausfüllt:
Stellen wir uns vor, wir wollen eine Spalte links und wissen genau, wie breit wir sie haben wollen: 300px. Wir können das definieren, indem wir hinzufügen Rastervorlagen-Spalten: 300px; zu unserem Gittercontainer. Aber wir werden keine anderen Kolumnen erhalten, außer wir ausdrücklich definieren sie:
Das heißt, es sei denn, wir möchten, dass eines der Gitterelemente in (beispielsweise) Spalte 3 in Zeile 1 platziert wird:
.item-3 Rasterspalte: 3; Rasterreihe: 1;
Das gibt uns dann zusätzliche Spalten draußen Unser definiertes Gitter, da das CSS-Grid den verfügbaren Platz und seinen automatischen Platzierungsalgorithmus verwenden wird, um herauszufinden, wo alles andere geht.
Das ist großartig, und Grid wird auch dann Annahmen treffen, wenn wir mehr Spalten haben möchten, ohne dass wir jede definieren müssen. Aber was ist, wenn wir wollen, dass diese implizierten Spuren, wie viele auch immer, eine bestimmte Breite haben? Das ist wo Raster-Auto-Spalten kommt ins Spiel.
Wenn alle Spalten außer der ersten 100px breit sein sollen, können wir implizit Folgendes angeben:
Raster-Auto-Spalten: 100px;
Gepaart mit unserem expliziten Wert erhalten wir das Beste aus beiden Welten. Hier sagen wir, dass die erste Kolumne sein soll 1fr (dass es nur einen Bruchteil des verbleibenden Platzes beansprucht-Auto hätte den gleichen Effekt hier) und dass alle anderen Spalten danach sein sollten 100px genau:
Rastervorlagen-Spalten: 1fr; Raster-Auto-Spalten: 100px;
Dies gibt uns folgendes:
Und wenn wir angeben, dass Element 3 tatsächlich in Spalte 5 in Zeile 1 platziert werden sollte, weiß Grid, wie breit zusätzliche Spalten sein sollen, da dies impliziert wird.
Wir sind auch hier nicht auf Pixelwerte beschränkt; Wir könnten Bruchteile verwenden, em Einheiten, sogar die Minimal Maximal() Notation, die wir in vorherigen Tutorials behandelt haben.
Das ist fast selbstverständlich Raster-Auto-Zeilen tut das gleiche für Zeilen als Raster-Auto-Spalten tut für Spalten. Hier ein Beispiel, bei dem alle Zeilen außer den ersten beiden auf einer Höhe von festgelegt sind 200px.
Viele der Eigenschaften von Grid verfügen über Standardwerte, die auf Sie aufpassen, falls Sie nichts anderes definieren, aber in manchen Fällen müssen wir zumindest implizieren, was wir wollen. Mit der impliziten Spuranpassung können wir implizieren, welche Größe zusätzliche Zeilen oder Spalten haben sollen, wenn sie jemals benötigt werden.
Accentsconagua