CSS gridlerinde auto-fill bahasynyň manyşy

Grid konteýneriniň deň sütünleriniň ölçegini kesgitlemek üçin repeat funksiýasynda auto-fill bahasyny görkezmek örän amatlydyr, sebäbi bu bizim konteýnerimizi biz talap eden inişlikdäki deň sütünler bilen doldurar.

Geliň, sekiz elementden ybarat tablisa düzeliň we her bir sütüne 200px deň inişlik belgileň. Şol bir wagtyň özünde, auto-fill bahasynyň gerekli sütün sanyny özi hasaplamagyna rugsat bereliň:

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

Результат: