CSS Grid တွင် repeat function အသုံးပြုခြင်း
သင့်တွင် တူညီသော အရွယ်အစားများ သတ်မှတ်ပေးရမည့် ကော်လံများ ရှိပါက၊
repeat function ကို အသုံးပြု၍ ရေးသားမှုကို ရိုးရှင်းအောင် ပြုလုပ်နိုင်ပါသည်။
ဤ function ၏ ပထမ parameter တွင် ကော်လံအရေအတွက်ကို ဖော်ပြပြီး၊ ဒုတိယ parameter တွင် ၎င်းတို့၏ အကျယ်ကို ဖော်ပြပါသည်။
ဥပမာများဖြင့် ယင်းအလုပ်လုပ်ပုံကို ကြည့်ရအောင်။
ဥပမာ
ကျွန်ုပ်တို့တွင် အရွယ်အစားတူညီသော ကော်လံ သုံးခု ရှိသည်ဆိုပါစို့။
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
repeat ကို အသုံးပြု၍ ရေးသားမှုကို ရိုးရှင်းအောင် ပြုလုပ်ပါမည်။
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
ဥပမာ
ကျွန်ုပ်တို့တွင် အရွယ်အစားတူညီသော ကော်လံ သုံးခု ရှိပြီး၊ စတုတ္ထကော်လံသည် အခြားအရွယ်အစား ဖြစ်သည်ဆိုပါစို့။
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
repeat ကို အသုံးပြု၍ ရေးသားမှုကို ရိုးရှင်းအောင် ပြုလုပ်ပါမည်။
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
ဥပမာ
ကျွန်ုပ်တို့တွင် ပထမ ကော်လံသုံးခုသည် တစ်မျိုးတည်းသော အရွယ်အစား ရှိပြီး၊ ဒုတိယ ကော်လံသုံးခုသည် အခြားအရွယ်အစား ရှိသည်ဆိုပါစို့။
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
repeat ကို အသုံးပြု၍ ရေးသားမှုကို ရိုးရှင်းအောင် ပြုလုပ်ပါမည်။
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
ဥပမာ
ကျွန်ုပ်တို့တွင် ပထမ ကော်လံသုံးခုသည် တစ်မျိုးတည်းသော အရွယ်အစား ရှိပြီး၊ ထို့နောက် နောက်ထပ် ကော်လံတစ်ခု၊ ပြီးမှ နောက်ထပ် ကော်လံသုံးခုသည် အခြားအရွယ်အစား ရှိသည်ဆိုပါစို့။
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
repeat ကို အသုံးပြု၍ ရေးသားမှုကို ရိုးရှင်းအောင် ပြုလုပ်ပါမည်။
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
ဥပမာ
ရိုးရှင်းအောင်ပြုလုပ်ခြင်းသည် မည်သည့် အရွယ်အစားယူနစ်အတွက်မဆို အလုပ်လုပ်ပါသည်။ ဥပမာအားဖြင့် ကျွန်ုပ်တို့တွင် ပီကေဆယ်ဖြင့် ကော်လံသုံးခု ရှိသည်ဆိုပါစို့။
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
repeat ကို အသုံးပြု၍ ရေးသားမှုကို ရိုးရှင်းအောင် ပြုလုပ်ပါမည်။
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
လက်တွေ့လေ့ကျင့်ခန်းများ
repeat ကို အသုံးပြု၍ အရွယ်အစားတူညီသော ကော်လံ 4 ခု ပြုလုပ်ပါ။
100px အရွယ်အစား ရှိသော ကော်လံ 4 ခု၊ ထို့အပြင် 2fr အရွယ်အစား ရှိသော ကော်လံ 3 ခု ပြုလုပ်ပါ။
100px အရွယ်အစား ရှိသော ကော်လံ 2 ခု၊
200px အရွယ်အစား ရှိသော ကော်လံ 3 ခု၊
ထို့နောက် 1fr အရွယ်အစား ရှိသော ကော်လံတစ်ခု၊
နှင့် ထို့နောက် 10% အရွယ်အစား ရှိသော ကော်လံ 2 ခု ပြုလုပ်ပါ။
