ဂရစ်ရိုး-စတာ့(grid-row-start) ဂုဏ်သတ္တိ

grid-row-start ဂုဏ်သတ္တိသည် ဂရစ်ဒ်(grid) သို့မဟုတ် ဂရစ်တစ်ခုအတွင်းရှိ အလုံးတစ်ခု၏ အတန်းများအလိုက် စတင်နေရာကို သတ်မှတ်ပေးသည်။ ဤဂုဏ်သတ္တိ၏ တန်ဖိုးသည် အပေါင်းကိန်း သို့မဟုတ် အနုတ်ကိန်း ဖြစ်နိုင်ပါသည်။ အကယ်၍ အပေါင်းကိန်းကို သတ်မှတ်ပါက၊ အလုံး၏ စတင်နေရာကို အပေါ်မှ အောက်သို့ ရေတွက်သွားမည်။ အနုတ်ကိန်းကို သတ်မှတ်ပါက အလုံးသည် ပြောင်းပြန်အစဉ်အတိုင်း တည်ရှိမည်၊ ဆိုလိုသည်မှာ အောက်မှ အပေါ်သို့ ဖြစ်ပါသည်။

ဝါကျဖွဲ့စည်းပုံ

cssရွေးချယ်မှု {
  grid-row-start: အပေါင်းကိန်း သို့မဟုတ် အနုတ်ကိန်း;
}

ဥပမာ

ဂရစ်ဒ်(grid) အတွင်းရှိ အလုံးများအတွက် စတင်နေရာများကို သတ်မှတ်ကြပါစို့။

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

Результат:

ဥပမာ

ယခု grid-row-start ဂုဏ်သတ္တိတွင် အနုတ်ကိန်းများကို သတ်မှတ်ကြည့်ပါမည်။ ယခုဆိုလျှင် 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;
}
#elem2 {
  grid-row-start: -2;
}
#elem3 {
  grid-row-start: -3;
}

Результат:

ဥပမာ

ပထမဘလောက်က အတန်းနှစ်ခုကို ယူထားအောင် လုပ်ကြည့်ပါမည်။ ထိုသို့လုပ်ရန် ကျွန်ုပ်တို့အနေဖြင့် grid-row-start နှင့် 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;
  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;
}

Результат:

ဤအရာကိုလည်း ကြည့်ပါ