Арзиши auto-fill дар CSS Grids

Барои таъин кардани андозаи сутунҳои якхелаи контейнери grid ҳусни истифода дар функсияи 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;
}

Результат: