grid-template-columns ගුණය

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

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

වාග් රීතිය

cssතෝරන්නා {
  grid-template-columns: තීරු පළල;
}

උදාහරණය

අපි අපේ විදුලි පණිවුඩ පෙළේ අංග සඳහා තීරු පළල නියම කරමු:

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

css#parent {
  display: grid;
  grid-template-columns: 50px 100px 200px 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-columns: 100px auto 150px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

උදාහරණය

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

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

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

Результат:

උදාහරණය

grid-template-columns ගුණයේ repeat() ශ්‍රිතය සඳහන් කරමු, එය බහාලුමට සියලුම තීරු තුනට සමාන පළලක් තිබිය යුතු බව පවසයි:

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

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  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>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 2fr;
  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>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#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-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#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-columns: repeat(auto-fill, 200px);
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

උදාහරණය

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

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

css#parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 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-columns: repeat(auto-fit, minmax(150px, 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-columns: 50% 1fr 2fr 30%;
  border: 2px solid #696989;
  padding: 10px;
  width: 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;
}

Результат:

තවද බලන්න