CSS ග්‍රිඩ් වල පේළි ඒකාබද්ධ කිරීම

ග්‍රිඩ් වල පේළි සහ තීරු ජාලයක් සාදයි. අංගයක් ජාල කොටුවක් එකක් නොව එකකට වැඩි ගණනක් අල්ලා ගන්නා ආකාරයට කළ හැකිය.

අංගයක් පේළියකට වඩා අල්ලා ගැනීම සඳහා, එයට grid-row ගුණාංගය නියම කළ යුතුය. මෙම ගුණාංගය තුළ, ග්‍රිඩ් එක තුළ අංගවල ආරම්භක සහ අවසාන ස්ථානය දක්වන අංක ඉරි මගින් වෙන් කර දක්වා ඇත.

මෙම අවස්ථාවේදී, අංගය පළමු ස්ථානයේ සිට දෙවන ස්ථානය දක්වා (එය ඇතුළත් නොකර) විහිදේ. එනම් 1 / 2 අගය අංගය පළමු කොටුව එකක් අල්ලා ගන්නා අතර, 1 / 3 අගය අංගය පළමු සහ දෙවන කොටු අල්ලා ගන්නා අතර (නමුත් තෙවන කොටුව ඇතුළත් නොවේ).

උදාහරණය

අපට ළමා අංග තුනක් සහිත ග්‍රිඩ් එකක් ඇතැයි සිතමු. පළමු අංගය පේළි දෙකක් අල්ලා ගන්නා ආකාරයට අපි ඒවා ස්ථානගත කරමු:

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

css#parent {
  display: grid;
  grid-template-columns: 2fr 1fr;
  height: 300px;
  width: 400px;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 3; /* පේළි දෙක */
}
#elem2 {
  grid-row: 1 / 2;
}
#elem3 {
  grid-row: 2 / 3;
}

Результат:

උදාහරණය

දැන් අපි හතරවන බ්ලොක් එකට පේළි තුනක් පවරමු:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 2fr 1fr;
  height: 300px;
  width: 400px;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 2;
}
#elem2 {
  grid-row: 2 / 3;
}
#elem3 {
  grid-row: 3 / 4;
}
#elem4 {
  grid-row: 1 / 4;
}

Результат:

ප්‍රායෝගික කාර්යයන්