CSS grid හි auto-fill අගය

grid container හි සමාන තීර වල ප්‍රමාණය සකස් කිරීම සඳහා repeat ශ්‍රිතය තුළ auto-fill අගය සඳහන් කිරීම ඉතා පහසුය, එයින් අපගේ container අවශ්‍ය පළලකින් යුත් සමාන තීර වලින් පිරෙනු ඇත.

අපි මූලද්‍රව්‍ය අටකින් යුත් වගුවක් සාදා එක් එක් තීරයට සමාන පළලක් 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;
}

Результат: