Użyj jednego auto-filllub auto-fitjako liczba powtórzeń w repeat()notacji.
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
auto-fill
Gdy auto-filljako numer powtórzenia podano, jeśli pojemnik siatki ma określony rozmiar lub maksymalny rozmiar na odpowiedniej osi, to liczba powtórzeń jest największą możliwą liczbą całkowitą dodatnią, która nie powoduje przepełnienia siatki pojemnika siatki.
.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>
Siatka będzie powtarzać tyle ścieżek, ile to możliwe, bez przepełnienia swojego kontenera.
W tym przypadku, biorąc pod uwagę powyższy przykład (patrz ilustracja) , tylko 5 ścieżek może zmieścić się w kontenerze siatki bez przepełnienia. W naszej siatce są tylko 4 elementy, więc piąty jest tworzony jako pusty tor w pozostałej przestrzeni.
Reszta pozostałej przestrzeni, ścieżka nr 6, kończy jawną siatkę. Oznacza to, że nie było wystarczająco dużo miejsca, aby umieścić kolejny tor.
auto-fit
auto-fitKluczowe zachowuje się tak samo jak auto-fillz tym, że po algorytmu placement pozycja siatki żadnych pustych utworów w pozostałej przestrzeni będzie upadł 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>
Siatka będzie nadal powtarzać tyle ścieżek, ile to możliwe, bez przepełnienia swojego kontenera, ale puste ścieżki zostaną zwinięte do 0.
Zwinięty tor jest traktowany jako mający stałą funkcję zmiany rozmiaru 0px.
W przeciwieństwie do auto-fillprzykładu z obrazkiem, pusta piąta ścieżka jest zwinięta, co kończy jawną siatkę zaraz po czwartym elemencie.
auto-fill vs auto-fit
Różnica między nimi jest zauważalna, gdy minmax()używana jest funkcja.
Służy minmax(186px, 1fr)do określania zakresu elementów od 186pxdo 186pxplus ułamek pozostałego miejsca w kontenerze siatki.
Podczas używania auto-fillprzedmioty będą rosły, gdy nie będzie miejsca na umieszczenie pustych ścieżek.
.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>
Podczas używania auto-fitelementy będą rosły, aby wypełnić pozostałą przestrzeń, ponieważ wszystkie puste ścieżki są zwinięte 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>
Plac zabaw:
Sprawdzanie ścieżek automatycznego wypełniania
Sprawdzanie torów autodopasowania
grid-template-columns: auto auto auto auto;działa w tym przypadku? =)