Gösterimin tekrar numarası olarak ya auto-fillda kullanın .auto-fitrepeat()
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
auto-fill
Tüm auto-filltekrarlama sayısı olarak verilmektedir ızgara kap ilgili eksende belirli bir boyut veya maksimum boyuta sahipse, o zaman tekrar sayısı ızgara da ızgara kabı taşmasına neden mümkün olan en büyük pozitif bir tamsayıdır.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Izgara, kabını taşmadan mümkün olduğu kadar çok izi tekrarlayacaktır.
Bu durumda, yukarıdaki örnek verildiğinde (resme bakın) , ızgara kabına taşmadan sadece 5 yol sığabilir. Gridimizde sadece 4 öğe vardır, bu nedenle beşincisi kalan alan içinde boş bir iz olarak oluşturulur.
Kalan alanın geri kalanı, parça # 6, açık ızgarayı sonlandırır. Bu, başka bir parkur yerleştirmek için yeterli alan olmadığı anlamına gelir.
auto-fit
auto-fitAnahtar kelime aynı şekilde davranır auto-fillsonra olması dışında ızgara öğesi yerleştirme algoritması kalan alan içinde herhangi bir boş parça ile çöktü edilecektir 0.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Izgara, kabını taşmadan mümkün olduğu kadar çok izi tekrarlayacaktır, ancak boş izler daraltılacaktır 0.
Daraltılmış bir iz, sabit bir iz boyutlandırma işlevine sahip olarak değerlendirilir 0px.
auto-fillResim örneğinden farklı olarak , boş beşinci parça daraltılır ve açık ızgara 4. öğeden hemen sonra sona erer.
auto-fill vs auto-fit
İkisi arasındaki fark, minmax()işlev kullanıldığında belirgindir .
Kullanım minmax(186px, 1fr)öğeleri değiştiği 186pxiçin 186pxartı ızgara kap içinde kalan boşluk bir kısmı.
Kullanırken auto-fill, boş izler yerleştirmek için yer kalmadığında öğeler büyüyecektir.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Kullanırken auto-fit, öğeler kalan alanı dolduracak şekilde büyüyecektir çünkü tüm boş parçalar daraltılmıştır 0px.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Oyun alanı:
Otomatik doldurma izlerini inceleme
Otomatik sığdırma izlerinin incelenmesi
grid-template-columns: auto auto auto auto;bu durumda çalışıyor mu? =)