Maksud auto-fill dalam Grid CSS

Untuk menetapkan saiz lajur grid-container yang sama sangat mudah untuk menggunakan fungsi repeat dengan nilai auto-fill, yang mana container kita akan dipenuhi dengan lajur yang sama dengan lebar yang kita kehendaki.

Mari buat jadual daripada lapan elemen dan tetapkan lebar setiap lajur kepada 200px. Pada masa yang sama, biarkan nilai auto-fill secara automatik mengira bilangan lajur yang diperlukan:

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

Результат: