CSS grid වල fr ඒකකය

Grid වල පේළි සහ තීරු වල ප්‍රමාණය px වලින් පමණක් නොව, fr (fraction) ඒකක වලින් ද නියම කළ හැකිය. මෙම ඒකක භාවිතා කිරීමෙන් අදහස් වන්නේ, අංග ස්ථානගත කිරීම සඳහා ඇති සම්පූර්ණ අවකාශය සමාන කොටස් හෝ භාග වලට බෙදනු ලැබීමයි. සෑම අංගයකටම මෙම බෙදීමෙන් නිශ්චිත කොටසක් ගත හැකිය. අපි බලමු මෙය කරන්නේ කෙසේද කියා.

අපි grid-template-columns ගුණය භාවිතා කර පළමු හා දෙවන grid තීරු container හි එක් කොටසක් ගන්නා අතර, තුන්වන තීරුව ගන්නේ කොටස් තුනක් වන පරිදි සකසමු:

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>9</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 3fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат: