ဂရစ်တ်-အတန်း-အဆုံး ဂုဏ်သတ္တိ

ဂုဏ်သတ္တိ 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;
}

Результат:

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