CSS Grid'de minmax Fonksiyonu
auto-fill ile birlikte
minmax fonksiyonunu belirtmek çok kullanışlıdır,
bu fonksiyon sütun genişlikleri için minimumdan maksimuma
bir değer aralığı belirler.
Kapsayıcının genişliği tüm sütunları sığdırmıyorsa,
bazıları yeni bir satıra taşınacak, bu arada satırdaki sütunlar
satır içinde eşit şekilde dağılacaktır.
Bir örnek üzerinde inceleyelim. Sütun yerleşiminin farklı varyasyonlarını görebilmek için sayfa genişliğini değiştirin:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
minmax fonksiyonunun çalışmasını gösteren
bir örnek yazın.
