CSS ဂရစ်များရှိ ကော်လံအရေအတွက်နှင့် အကျယ်

ဂရစ်တစ်ခုတွင် အလုပ်လုပ်ခြင်းကို မိတ်ဆက်ခြင်းအနေဖြင့် ကျွန်ုပ်တို့သည် ကော်လံအရေအတွက်နှင့် အကျယ်ကို သတ်မှတ်ခြင်းဖြင့် စတင်ပါမည်။ ထိုကော်လံများတလျှောက် ကလေးအစိတ်အပိုင်းများ နေရာချထားမည်ဖြစ်သည်။ ဤအကြောင်းရပ်အတွက် ကျွန်ုပ်တို့သည် grid-template-columns ပိုင်ဆိုင်မှုကို အသုံးပြုမည်၊ ထိုပိုင်ဆိုင်မှုကို မိဘအစိတ်အပိုင်းတွင် ဖော်ပြပြီး ဂရစ်အတွင်းရှိ ကလေးအစိတ်အပိုင်းများ နေရာယူမည့် ကော်လံများ၏ အရေအတွက်နှင့် အကျယ်ကို သတ်မှတ်ပေးသည်။ ပိုင်ဆိုင်မှု၏တန်ဖိုးတွင် ကျွန်ုပ်တို့သည် ကော်လံများ၏အကျယ်ကို ပစ်ဆယ်များဖြင့် ဖော်ပြပါမည်။

ဥပမာ

ပထမဦးစွာ မိဘအစိတ်အပိုင်းတစ်ခုကို ဖန်တီးပြီး ၎င်းကို ဂရစ်ကွန်တိန်နာတစ်ခုအဖြစ် ပြုလုပ်ကြပါစို့။ ကျွန်ုပ်တို့တွင် div တစ်ခုရှိပါစေ၊ ၎င်းအတွင်းတွင် ကလေးအစိတ်အပိုင်းလေးခု တည်ရှိသည်။ ၎င်းအတွက် display ပိုင်ဆိုင်မှုတွင် grid တန်ဖိုးကို သတ်မှတ်ပေးပါ၊ ထို့ပြင် grid-template-columns ပိုင်ဆိုင်မှုတွင် ကော်လံနှစ်ခုအတွက် အကျယ်ကို ရေးသားပါမည်:

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

css#parent {
  display: grid;
  grid-template-columns: 200px 400px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ဥပမာ

ယခု အရွယ်အစားအမျိုးမျိုးရှိ ကော်လံလေးခုပါသည့် တစ်ခုကို ဖန်တီးကြည့်ကြပါစို့:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 50px 100px 200px 250px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

လက်တွေ့လေ့ကျင့်ခန်းများ