CSS ග්‍රිඩ් වල auto අගය

ග්‍රිඩ් එකක පේළි සහ තීරු වල ප්‍රමාණ නියම කිරීමේදී auto අගය භාවිතා කළ හැකිය. මෙම අවස්ථාවේදී, කොටු විසින් පික්සල වලින් නියම කරන ලද පළල අඩු කිරීමෙන් පසු ඉතිරිව ඇති ලබා ගත හැකි සියලුම ඉඩ තමන්ට පුරවා ගනී. අපි උදාහරණ සමඟ බලමු.

පළමු සහ තෙවන තීරු වලට පික්සල වලින් ස්ථාවර පළලක් නියම කරමු, දෙවන තීරුව ස්වයංක්‍රීයව ගන්නට දෙමු ඉතිරි ඉඩ:

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: 100px auto 150px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат: