Bu yedinci örnekte, otomatik olarak yerleştirilen ve esnek alt öğeleri olan duyarlı bir düzen oluşturmak için öğrendiğiniz kavramlardan bazılarını birleştirin. Çok kullanışlı. Burada unutulmaması gereken temel terimler repeat, auto-(fit|fill) ve minmax()'dir. Bunlar, RAM kısaltmasından hatırlanır.
Hepsi bir araya geldiğinde şöyle görünür:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Tekrar repeat() kullanıyorsunuz ancak bu sefer açık bir sayısal değer yerine auto-fit anahtar kelimesini kullanıyorsunuz. Bu, söz konusu alt öğelerin otomatik olarak yerleştirilmesini sağlar. Bu çocuklar için minimum değer 150px ve maksimum 1fr değeridir. Yani daha küçük ekranlarda 1fr genişliğinin tamamını kaplar ve her biri 150px genişliğe ulaştıkça aynı çizgiye akmaya başlar.
auto-fit kullanıldığında, tamamen boş olan tüm parçalar 0 boyutuna küçültülür ve doldurulmuş parçalar yer kaplayacak şekilde büyür. Ancak bunu auto-fill olarak değiştirirseniz boş kanallar, doldurulduklarında alacaklarıyla aynı miktarda alanı kaplar:
.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));
}