Verwenden Sie entweder auto-filloder auto-fitals Wiederholungsnummer der repeat()Notation.
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
auto-fill
Wenn auto-fillals Wiederholungszahl angegeben wird und der Gittercontainer eine bestimmte Größe oder maximale Größe in der relevanten Achse hat, ist die Anzahl der Wiederholungen die größtmögliche positive Ganzzahl, die nicht dazu führt, dass das Gitter seinen Gittercontainer überläuft.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Das Raster wiederholt so viele Spuren wie möglich, ohne dass der Container überläuft.
In diesem Fall können im obigen Beispiel (siehe Bild) nur 5 Spuren in den Gittercontainer passen, ohne überzulaufen. Es gibt nur 4 Elemente in unserem Raster, sodass ein fünftes als leere Spur innerhalb des verbleibenden Bereichs erstellt wird.
Der Rest des verbleibenden Platzes, Spur 6, beendet das explizite Raster. Dies bedeutet, dass nicht genügend Platz vorhanden war, um eine andere Spur zu platzieren.
auto-fit
Das auto-fitSchlüsselwort verhält sich wie das gleiche auto-fill, außer dass nach dem Platzierungsalgorithmus für Rasterelemente alle leeren Spuren innerhalb des verbleibenden Bereichs reduziert werden 0.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Das Raster wiederholt immer noch so viele Spuren wie möglich, ohne den Container zu überlaufen, aber die leeren Spuren werden auf reduziert 0.
Eine kollabierte Spur wird so behandelt, als hätte sie eine feste Spurgrößenfunktion von 0px.
Im Gegensatz zum auto-fillBildbeispiel wird die leere fünfte Spur reduziert und das explizite Raster direkt nach dem vierten Element beendet.
auto-fill vs. auto-fit
Der Unterschied zwischen den beiden ist spürbar, wenn die minmax()Funktion verwendet wird.
Verwenden minmax(186px, 1fr) diese Option, um die Elemente von 186pxbis zu 186pxeinem Bruchteil des verbleibenden Platzes im Rastercontainer zu sortieren.
Bei der Verwendung auto-fillwachsen die Elemente, sobald kein Platz mehr für leere Spuren vorhanden ist.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Bei Verwendung auto-fitwerden die Elemente vergrößert, um den verbleibenden Platz zu füllen, da alle leeren Spuren reduziert sind 0px.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Spielplatz:
Überprüfen der Spuren zum automatischen Ausfüllen
Überprüfen von Auto-Fit-Spuren
grid-template-columns: auto auto auto auto;funktioniert in diesem Fall? =)