grid-auto-columns ဂုဏ်သတ္တိ

grid-auto-columns ဂုဏ်သတ္တိသည် အလိုအလျောက်ဂရစ် (implicit grid) အတွင်းရှိ အစိတ်အပိုင်းတစ်ခု သိမ်းယူမည့် ကော်လံများ၏ အရေအတွက်နှင့် အနံကို သတ်မှတ်ပေးသည်။ အလိုအလျောက်ဂရစ် ဆိုသည်မှာ သတ်မှတ်ပြီးသား ဂရစ်အကျယ်ပြင့်ထက်သို့ အစိတ်အပိုင်းများ ရောက်ရှိသွားသည့်အခါ အလိုအလျောက်ဖြစ်ပေါ်လာသော ဂရစ်ဖြစ်သည်။ ဂုဏ်သတ္တိတန်ဖိုးတွင် ကော်လံများ၏အနံကို မည်သည့် အတိုင်းအတာ ယူနစ်များနှင့်မဆို သတ်မှတ်နိုင်သည်။ ဤဂုဏ်သတ္တိကို မိဘအစိတ်အပိုင်းတွင် သတ်မှတ်ပြီး ၎င်း၏ဆင်းသက်အစိတ်အပိုင်းများ (child elements) အတွက် ကော်လံအနံများကို သတ်မှတ်ပေးသည်။

ဖွဲ့စည်းပုံ

cssselector {
  grid-auto-columns: column-width;
}

နမူနာ

ကျွန်ုပ်တို့၏ အလိုအလျောက်ဂရစ်အတွင်းရှိ အစိတ်အပိုင်းများအတွက် ကော်လံအနံများ သတ်မှတ်ကြည့်ရအောင်။

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

css#parent {
  display: grid;
  grid-template-rows: 40px 40px;
  grid-auto-columns: 200px;
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

ဆက်လက်လေ့လာရန်