CSS Grid များတွင် minmax function

auto-fill နှင့်အတူ minmax function ကို သတ်မှတ်ခြင်းသည် အလွန်အဆင်ပြေပါသည်။ ထို function သည် column အကျယ်၏ အနည်းဆုံးတန်ဖိုးမှ အများဆုံးတန်ဖိုးအထိ အတိုင်းအတာအပိုင်းအခြားကို သတ်မှတ်ပေးသည်။ အကယ်၍ container ၏အကျယ်သည် column အားလုံးကို ဆန့်ထည့်နိုင်ခြင်းမရှိပါက၊ ၎င်းတို့အနက်မှ အချို့သည် အတန်းအသစ်တစ်ခုပေါ်သို့ ပြောင်းရွှေ့သွားမည်ဖြစ်ပြီး၊ အတန်းအတွင်းရှိ column များသည် ၎င်းအတွင်းတွင် ညီမျှစွာ ဖြန့်ကျက်သွားမည်ဖြစ်သည်။

ဥပမာတစ်ခုကို ကြည့်ရအောင်။ column များ နေရာချထားပုံအမျိုးမျိုးကို မြင်တွေ့နိုင်ရန် စာမျက်နှာ၏အကျယ်ကို ပြောင်းလဲကြည့်ပါ။

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: repeat(auto-fill, minmax(150px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат: