Maana ya auto-fill katika Gridi za CSS

Kwa ajili ya kuweka ukubwa wa safu wima sawa za chombo cha gridi ni rahisi sana kutaja katika kitendakazi repeat thamani auto-fill, ambayo kwayo chombo chetu kitajazwa na safu wima sawa za upana tuliotaka.

Wacha tutengeneze jedwali la vitu nane na tukabidi upana wa kila safu wima uwe 200px. Wakati huo huo, thamani auto-fill ibaini peke yake idadi inayohitajika ya safu wima:

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

Результат: