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