CSS ဂရစ်များတွင် auto-fit ၏တန်ဖိုး
ယခု ကျွန်ုပ်တို့သည် auto-fit တန်ဖိုးကို လေ့လာကြည့်ကြပါစို့။
ထိုတန်ဖိုးကို repeat လုပ်ဆောင်ချက်နှင့်အတူ အသုံးပြု၍ အရွယ်အစားတူညီသော ကော်လံများကို သတ်မှတ်ရာတွင် အသုံးပြုပါသည်။
၎င်း၏ auto-fill တန်ဖိုးနှင့် ကွာခြားချက်မှာ auto-fit သည် ကော်လံအရေအတွက်ကို ကွန်တိန်နာ၏ ရရှိနိုင်သော အနံနှင့်အညီ ချိန်ညှိပေးပြီး ၎င်းတို့ကို ကျယ်ပြန့်စေ (သို့) ကျုံ့သွားစေပါသည်။
ဥပမာ
အရာဝတ္ထုရှစ်ခုပါဝင်သော ကွန်တိန်နာတစ်ခုဖြင့် auto-fit တန်ဖိုး၏လုပ်ဆောင်ပုံကို ကြည့်ကြပါစို့။
auto-fit တန်ဖိုးနှင့်အတူ ယခင်သင်ခန်းစာမှ သင်သိထားပြီးဖြစ်သော minmax လုပ်ဆောင်ချက်ကို အသုံးပြုကြပါမည်။
<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>
#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 သို့ လျှော့ချကြည့်ပါမည်။
<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>
#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;
}
:
လက်တွေ့လေ့ကျင့်ခန်းများ
သင့်တွင် အရာဝတ္ထုကိုးခုပါဝင်သည့် ဇယားရှိသည်ဆိုပါစို့။
auto-fit တန်ဖိုးကိုအသုံးပြု၍ ကော်လံများ၏အနံနှင့် ဂရစ်ကွန်တိန်နာ၏အနံကို ကလေးအရာဝတ္ထုအားလုံး အတန်းသုံးတန်းတွင် နေရာယူစေရန် သတ်မှတ်ပေးပါ။
ယခု အရာဝတ္ထုအားလုံး အတန်းနှစ်တန်းတွင် နေရာယူသွားစေရန် ယခင်လေ့ကျင့်ခန်းကို ပြုပြင်မွမ်းမံပါ။
