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:

html<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>

css#parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат: