fr ඒකකය

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

උදාහරණය

grid-template-columns ගුණාංගය භාවිතා කර පළමු හා දෙවන ග්‍රිඩ් තීරු බඳුනේ එක් කොටසක් ගනිමින්, තෙවන තීරුව කොටස් තුනක් ගන්නා ආකාරයට කරමු:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

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

Результат:

උදාහරණය

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

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</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;
}

Результат:

මේවාත් බලන්න