CSS grid များတွင် fr unit
Grid အတွင်းရှိ row နှင့် column အရွယ်အစားများကို
px ဖြင့်သာမက
ပြောင်းလွယ်ပြင်လွယ် ယူနစ်ဖြစ်သော fr (အပိုင်းအစ) ဖြင့်လည်း
သတ်မှတ်နိုင်ပါသည်။
ဤယူနစ်များကို အသုံးပြုခြင်းသည်
အစုတ်များ နေရာချထားရန် နေရာအားလုံးကို
တူညီသော အပိုင်းများ (သို့မဟုတ်) အပိုင်းအစများအဖြစ်
ခွဲခြမ်းသတ်မှတ်မည် ဟု ဆိုလိုပါသည်။
Element တစ်ခုစီသည် ဤခွဲခြမ်းမှုထဲမှ
သတ်မှတ်ထားသော အပိုင်းကို
ယူနိုင်ပါလိမ့်မည်။
ထိုသို့ မည်သို့ပြုလုပ်သည်ကို
ကြည့်ကြပါစို့။
ပထမ နှင့် ဒုတိယ column များသည်
container ၏ တစ်ပိုင်းကို ယူပြီး
တတိယ column သည် သုံးပိုင်းကို ယူစေရန်
grid-template-columns property ကို အသုံးပြု၍
ပြုလုပ်ကြည့်ကြပါစို့။
<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>9</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
သင့် grid တွင် column နှစ်ခု ရှိသည်ဆိုပါစို့။ column နှစ်ခုစလုံး အကျယ်တူညီစေရန် ပြုလုပ်ပါ။
သင့် grid တွင် column သုံးခု ရှိသည်ဆိုပါစို့။ column သုံးခုစလုံး အကျယ်တူညီစေရန် ပြုလုပ်ပါ။
သင့် grid တွင် column သုံးခု ရှိသည်ဆိုပါစို့။ တတိယ column သည် ပထမ နှင့် ဒုတိယ column ထက် နှစ်ဆကြီးမားစေရန် ပြုလုပ်ပါ။
