CSS Gridlarda auto-fill qiymati
Grid-konteynerning bir xil ustunlari o‘lchamini o‘rnatish uchun
repeat funksiyasida
auto-fill qiymatini ko‘rsatish juda qulay,
uning yordamida bizning konteynerimiz kerakli kenglikdagi
bir xil ustunlar bilan to‘ladi.
Keling, sakkiz elementdan iborat jadval yarataylik va
har bir ustunga 200px bir xil kenglik bering.
Bunda, auto-fill qiymati o‘zi
kerakli ustunlar sonini hisoblab chiqsin:
<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, 200px);
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ustun kengligini 200px ga o‘rnating.
Ota-ona elementining kengligini o‘zgartiring va
qanday qilib ustunlar soni o‘zgarishini
ko‘ring.
