grid-row ගුණය

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

වාග් රීතිය

cssතෝරන්නා {
  grid-row: ආරම්භක ස්ථාන / අවසාන ස්ථාන;
}

උදාහරණය

අපි ජාලයක ඇති අංග සඳහා ආරම්භක සහ අවසාන ස්ථාන සකසමු:

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;
  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;
}

Результат:

උදාහරණය

දැන් අපි grid-row ගුණයේ ඍණ සංඛ්‍යා දක්වමු:

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;
  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;
}

Результат:

උදාහරණය

පළමු බ්ලොක් කොටස පේළි දෙකක් ගන්නා ලෙස සකසමු:

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;
}

Результат:

උදාහරණය

grid-row ගුණය සහ grid-column ගුණය ඒකාබද්ධ කරමු:

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 1fr;
  border: 2px solid #696989;
  padding: 10px;
  height: 300px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 3;
}
#elem2 {
  grid-row: 1 / 2;
}
#elem3 {
  grid-row: 1 / 2;
}
#elem4 {
  grid-row: 2 / 3;
  grid-column: 2 / 4;
}

Результат:

උදාහරණය

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

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 id="elem5">5</div>
</div>

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

Результат:

මේවාද බලන්න