W siódmym przykładzie połączmy znane Ci już koncepcje, by utworzyć elastyczny układ z automatycznie umieszczanymi w nim elementami elastycznymi. Całkiem ładnie. Najważniejsze hasła do zapamiętania to repeat, auto-(fit|fill) i minmax(). Nazwy te przypominają skrót RAM.
W sumie wygląda to tak:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Ponownie używasz słowa kluczowego repeat(), ale tym razem ze słowem kluczowym auto-fit, a nie z bezpośrednią wartością liczbową. Umożliwia to automatyczne umieszczanie tych elementów podrzędnych. Te dzieci mają podstawową wartość minimalną 150px, a maksymalną wartość 1fr, co oznacza, że na mniejszych ekranach będą zajmować pełną szerokość 1fr. Gdy dojdą do 150px szerokości, zaczną przechodzić do tej samej linii.
W auto-fit wszystkie całkowicie puste ścieżki zwijają się do 0, a wypełnione ścieżki powiększają się i zajmują miejsce. Jeśli jednak zmienisz to ustawienie na auto-fill, puste ścieżki zajmą taką samą ilość miejsca, jak gdyby zostały wypełnione:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
HTML
<div class="parent white">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
CSS
.parent {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}