CSS ရှိ လျှို့ဝှက်ကွန်ရက်

လျှို့ဝှက်ကွန်ရက် ကို browser မှ အရာဝတ္ထုအရေအတွက်သည် ရှင်းလင်းပြတ်သားသော ကွန်ရက်အတွင်းသို့ မဝင်နိုင်သည့်အခါ အလိုအလျောက် ဖန်တီးသည်။ ဤဖြစ်စဉ်မည်သို့ဖြစ်ပေါ်သည်ကို ကြည့်ရအောင်။

ကျွန်ုပ်တို့တွင် ဘလောက်လေးခုရှိသည်ဆိုပါစို့-

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

ကျွန်ုပ်တို့၏ ကွန်ရက်၏အရွယ်အစားသည် 3 အနက် 3 ရှိသည်ဆိုပါစို့-

css#parent {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 50px 50px 50px;
}

ကျွန်ုပ်တို့၏ ဘလောက်သုံးခုကို ကွန်ရက်အတိုင်း နေရာချကြည့်ရအောင်-

css#elem1 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
#elem2 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
#elem3 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

စတုတ္ထဘလောက်ကိုမူ စတုတ္ထမြောက် row နှင့် column တွင်နေရာချမည်-

css#elem4 {
  grid-row: 4 / 5;
  grid-column: 4 / 5;
}

ကျွန်ုပ်တို့၏ ကွန်ရက်အရွယ်အစားသည် 3 အနက် 3 ဖြစ်သောကြောင့်၊ ထိုသို့သော စတုတ္ထ row နှင့် column သည် ဤကွန်ရက်တွင် ရှိလိမ့်မည်မဟုတ်ပါ။ သို့သော် ယင်းတို့သည် ရှင်းလင်းပြတ်သားသော ပုံစံတွင် ရှိမည်မဟုတ်ပါ၊ ဆိုလိုသည်မှာ ကျွန်ုပ်တို့သတ်မှတ်ပေးထားသည့် ပုံစံတွင် မရှိပါ။ သို့သော် browser သည် ယင်းတို့ကို လျှို့ဝှက် ပုံစံဖြင့် ဖန်တီးပေးမည်၊ ဆိုလိုသည်မှာ သူ့ဘာသာသူဖန်တီးမည်။

ဤသို့ဖြစ်ရာ၊ အရွယ်အစားများကို ကျွန်ုပ်တို့သည် ရှင်းလင်းပြတ်သားသော ကွန်ရက်အတွက်သာ သတ်မှတ်ပေးထားသောကြောင့်၊ ဤကွန်ရက်၏အပြင်ဘက်ရှိ ဆဲလ်များအတွက် အရွယ်အစားများကို browser ကသာ တွက်ချက်ပေးမည်။ ဆိုလိုသည်မှာ ကျွန်ုပ်တို့၏ကိစ္စတွင် စတုတ္ထဘလောက်၏အရွယ်အစားများသည် browser မှ အလိုအလျောက် သတ်မှတ်ပေးမည်ဖြစ်သည်။

ကျွန်ုပ်တို့ ဘာရလဒ်ရမည်ကို ကြည့်ရအောင်-

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

Результат: