RAM (powtarzanie, automatyczne, minimum)

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));
}

<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>
  

        .parent {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}