CSS гридларида auto-fill қиймати

Грид-контейнернинг бир хил устунлари ўлчамини белгилаш учун repeat функцисида auto-fill қийматини кўрсатиш жуда қулай, бунга кўра бизнинг контейнеримиз керакли ўлчамдаги бир хил устунлар билан тўлади.

Келинг, саккизта элементдан иборат жадвал яратиб, ҳар бир устунга 200px бир хил энни белгилайлик. Шу билан бирга, auto-fill қиймати ўзи керкли устунлар сонини ҳисобласин:

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

Результат: