grid-row-end ගුණාංගය

grid-row-end ගුණාංගය ග්‍රිඩ් එකක හෝ දැලක මූලද්‍රව්‍යයක අවසාන පේළි ස්ථානය නියම කරයි. ගුණාංගයේ අගය ධනාත්මක හෝ ඍණ සංඛ්‍යාවක් විය හැකිය. අපි ධනාත්මක අංකයක් නියම කරන්නේ නම්, මූලද්‍රව්‍යයේ ආරම්භක ස්ථානය ඉහළ සිට පහළට ගණනය කෙරේ. ඍණ අංකයක් නියම කරන විට මූලද්‍රව්‍යය ප්‍රතිලෝම අනුපිළිවෙලින් පිහිටුවනු ලැබේ, එනම් පහළ සිට ඉහළට.

වාක්‍ය රීතිය

cssතෝරන්නා {
  grid-row-end: ධනාත්මක හෝ ඍණ සංඛ්‍යාව;
}

උදාහරණය

ග්‍රිඩ් එකක මූලද්‍රව්‍ය සඳහා අවසාන ස්ථාන නියම කරමු:

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

css#parent {
  display: grid;
  padding: 10px;
  width: 400px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row-start: 1;
  grid-row-end: 2;
}
#elem2 {
  grid-row-start: 2;
  grid-row-end: 3;
}
#elem3 {
  grid-row-start: 3;
  grid-row-end: 4;
}

Результат:

උදාහරණය

පළමු බ්ලොක් එක පේළි දෙකක් ආවරණය කරන පරිදි කරමු:

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-start: 1;
  grid-row-end: 3;
}
#elem2 {
  grid-row-start: 1;
  grid-row-end: 2;
}
#elem3 {
  grid-row-start: 2;
  grid-row-end: 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-start: 1;
  grid-row-end: 2;
}
#elem2 {
  grid-row-start: 2;
  grid-row-end: 3;
}
#elem3 {
  grid-row-start: 3;
  grid-row-end: 4;
}
#elem4 {
  grid-row-start: 1;
  grid-row-end: 4;
}

Результат:

උදාහරණය

දැන් අපි grid-row-start සහ grid-row-end ගුණාංගවල ඍණ සංඛ්‍යා දක්වමු. දැන් elem3 වඩාත් ඉහළ පේළිය අල්ලාගනී, සහ elem1 - වඩාත් පහළ:

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

css#parent {
  display: grid;
  padding: 10px;
  width: 400px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row-start: -1;
  grid-row-end: -2;
}
#elem2 {
  grid-row-start: -2;
  grid-row-end: -3;
}
#elem3 {
  grid-row-start: -3;
  grid-row-end: -4;
}

Результат:

මෙයද බලන්න