CSS ග්‍රිඩ් වල භාගික ඒකක fr

fr ඒකක වලින් දක්වා ඇති අගයන්, භාගික ආකාරයෙන් ගත හැකිය. අපි කලින් උදාහරණය වෙනස් කර, දෙවන සහ තෙවන තීරුවේ පළල භාගික සංඛ්‍යා වලින් නියම කරමු:

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

Результат: