ဂရစ်-ရိုး ဂုဏ်သတ္တိ

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

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

cssselector {
  grid-row: start position / end position;
}

နမူနာ

ဂရစ်အတွင်းရှိ အစိတ်အပိုင်းများအတွက် အစနှင့် အဆုံးအနေအထားများကို သတ်မှတ်ကြပါစို့:

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

Результат:

ဤသည်လည်း ကြည့်ရှုပါ