CSS ဂရစ်များတွင် auto-fit ၏တန်ဖိုး

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

ဥပမာ

အရာဝတ္ထုရှစ်ခုပါဝင်သော ကွန်တိန်နာတစ်ခုဖြင့် auto-fit တန်ဖိုး၏လုပ်ဆောင်ပုံကို ကြည့်ကြပါစို့။ auto-fit တန်ဖိုးနှင့်အတူ ယခင်သင်ခန်းစာမှ သင်သိထားပြီးဖြစ်သော minmax လုပ်ဆောင်ချက်ကို အသုံးပြုကြပါမည်။

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

Результат:

ဥပမာ

ယခု ဂရစ်ကွန်တိန်နာ၏အနံကို 400px သို့ လျှော့ချကြည့်ပါမည်။

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

Результат:

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