grid-template-rows ගුණය

grid-template-rows ගුණය මගින් ග්‍රිඩ් හෝ ජාලයක අංගයක් අල්ලාගන්නා පේළි ගණන සහ පළල නියම කරයි. ගුණයේ අගය තුළ අපි පේළිවල පළල ඕනෑම ප්‍රමාණ ඒකක වලින් දක්වමු. මෙම ගුණය දක්වන්නේ දෙමාපිය අංගයේ එය ළමා අංගවල පේළි පළල අර්ථ දක්වයි.

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

වාක්‍ය රචනය

cssතේරුම්ගන්නා {
  grid-template-rows: පේළියේ පළල;
}

උදාහරණය

අපගේ ග්‍රිඩ් අංග සඳහා පේළි පළල දක්වමු:

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

css#parent {
  display: grid;
  grid-template-rows: 50px 100px 50px 50px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

උදාහරණය

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

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

css#parent {
  display: grid;
  grid-template-rows: 100px auto 60px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

උදාහරණය

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

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

css#parent {
  display: grid;
  grid-template-rows: 1fr 1fr 3fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

උදාහරණය

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

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

css#parent {
  display: grid;
  grid-template-rows: 1fr 0.5fr 2.5fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

උදාහරණය

grid-template-rows ගුණය තුළ repeat() ශ්‍රිතය දක්වමු, එය පටිගත කරන්නාට ඇඟවුම් කරන්නේ සියලු පේළි තුනටම සමාන පළලක් තිබිය යුතු බවයි:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

උදාහරණය

දැන් පෙර උදාහරණය වෙනස් කර සමාන පේළි තුනට පටිගත කරන්නේ කොටස් දෙකක් අල්ලාගන්නා හතරවන පේළියක් එකතු කරමු:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(3, 1fr) 2fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

උදාහරණය

පළමු පේළි දෙකට පටිගත කරන්නේ කොටසක පළලක් දක්වා අවසන් පේළි දෙකට පටිගත කරන්නේ කොටස් දෙකක පළලක් දක්වමු:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

උදාහරණය

දැන් පේළිවල පළල සකසමු repeat() ශ්‍රිතය සහ නිදහස් fr ඒකක භාවිතයෙන් දක්වන අගයන් සම්බන්ධ කරගනිමින්:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 300px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

උදාහරණය

repeat() ශ්‍රිතය තුළ auto-fill අගය දැක්විය හැකිය, එය අපගේ පටිගත කරන්නා අවශ්‍ය පළලින් යුත් සමාන පේළි වලින් පුරවයි:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fill, 50px);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

උදාහරණය

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

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

css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

උදාහරණය

දැන් අපි auto-fit ගුණය දක්වමු, එය auto-fill වලින් වෙනස් වන්නේ පේළි ගණන ලබා ගත හැකි පටිගත කරන්නාගේ පළලට ගැලපෙන පරිදි විශාල කිරීම හෝ හකුළුවීමයි:

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

css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

උදාහරණය

fr සමඟ % වල අගයන් ද භාවිතා කළ හැකිය, ඒවා ද පේළියක් පටිගත කරන්නේ කුමන කොටසක් අල්ලාගන්නේද යන්න නිර්වචනය කරයි. මෙහිදී පළමුව පේළියේ ප්‍රමාණය % වලින් ගණනය කරනු ලබන අතර, ඉතිරි නිදහස් ඉඩ භාග වලට බෙදනු ලැබේ:

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

css#parent {
  display: grid;
  grid-template-rows: 50% 1fr 2fr 30%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

උදාහරණය

grid-template-columns සහ grid-template-rows ගුණ එකට භාවිතා කරමු:

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-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

උදාහරණය

grid-template-columns සහ grid-template-rows ගුණ භාවිතා කර පේළි තුනක පිහිටා ඇති කොටු නවයකගෙන් යුත් වගුවක් නිර්මාණය කරමු. දෙවන හා තුන්වන පේළියට සමාන පළලක් ඇති අතර, සෑම තීරුවකටම විවිධ පළලක් ඇත:

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-rows: 60px 1fr 60px;
  grid-template-columns: 20% 1fr 15%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

උදාහරණය

දැන් පෙර උදාහරණයේ වගුවේ ඉහළ පේළිය කොටස් දෙකක පළලකින් සහ පළමු තීරුව භාගයක කොටසක පළලකින් සකසමු:

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-rows: 2fr 1fr 1fr;
  grid-template-columns: 0.5fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

මෙයද බලන්න