CSS တွင် အလိုအလျောက်အကျယ်အဝန်းဘလောက်များပါသည့် ကြွေပြားအခင်းအကျင်း၏ အကွာအဝေး

တန်းတစ်တန်းလျှင် ဘလောက်လေးခုပါသော ကြွေပြားအခင်းအကျင်းတစ်ခု ကျွန်ုပ်တို့တွင် ရှိသည်ဆိုပါစို့။

.child {
	width: 25%;
}

ကျွန်ုပ်တို့၏ ဘလောက်များကို ရာခိုင်နှုန်းဖြင့် အလျားလိုက်နှင့် ဒေါင်လိုက် အကွာအဝေးများ ပေါင်းထည့်ကြပါစို့။

.child {
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

ကျွန်ုပ်တို့လုပ်ခဲ့သည်မှာ ဘလောက်များ၏စုစုပေါင်းအကျယ်နှင့် အကွာအဝေးများ စုစုပေါင်းသည် 100% ထက်ပိုနေသောကြောင့် အခုထိတော့ မှန်ကန်စွာအလုပ်မလုပ်နိုင်သေးပါ။ မှန်ကန်စွာအလုပ်လုပ်နိုင်ရန် ကျွန်ုပ်တို့၏အကွာအဝေးများအတွက် နေရာဖန်တီးပေးရန် ဘလောက်တစ်ခုစီမှ အပိုင်းအချို့ကို နှုတ်ပစ်ရမည်။ ထိုအပိုင်းများကို တွက်ကြည့်ကြပါစို့။

ကျွန်ုပ်တို့၏ကိစ္စတွင်၊ ဘလောက်လေးခုရှိပြီး ၎င်းတို့ကြားတွင် ရာခိုင်နှုန်း ၁.၅ စီရှိသော အကွာအဝေးသုံးခုရှိသည်။ နှုတ်ပစ်ရမည့်အပိုင်းကို တွက်ချက်ရန် စုစုပေါင်းအကွာအဝေးကို ဘလောက်အရေအတွက်ဖြင့် စားရမည်။

1.5% * 3 / 4 = 1.125

ထိုအခါ ဘလောက်တစ်ခုစီ၏အကျယ်သည် ညီမျှမည်။

25% - 1.5% * 3 / 4 = 23.875%

အောက်ပါကုဒ်ကို ရရှိမည်။

.child {
	width: 23.875%;
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

ဤအကွာအဝေးကို ကိုယ်တိုင်တွက်ချက်ရန်မလိုဘဲ၊ တွက်ချက်မှုအလုပ်ကို calc function ပေါ်သို့ လွှဲအပ်နိုင်သည်။

.child {
	width: calc(25% - 1.5% * 3 / 4);
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

ဘလောက်၏အကျယ်ကိုလည်း calc function က တွက်ချက်ပါစေ့။

.child {
	width: calc(100% / 4 - 1.5% * 3 / 4);
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

�ြွေပြားအခင်းအကျင်းတွင် တန်းတစ်တန်းလျှင် ဘလောက်သုံးခုဖြစ်လာစေရန်၊ ၎င်းတို့ကြားတွင် 3% အကွာအဝေးရှိစေရန် ဘလောက်များကို ရာခိုင်နှုန်းဖြင့်အကျယ် သတ်မှတ်ပေးပါ။

ကြွေပြားအခင်းအကျင်းတွင် တန်းတစ်တန်းလျှင် ဘလောက်ခြောက်ခုဖြစ်လာစေရန်၊ ၎င်းတို့ကြားတွင် 0.5% အကွာအဝေးရှိစေရန် ဘလောက်များကို ရာခိုင်နှုန်းဖြင့်အကျယ် သတ်မှတ်ပေးပါ။

ကြွေပြားအခင်းအကျင်းတွင် တန်းတစ်တန်းလျှင် ဘလောက်လေးခုဖြစ်လာစေရန်၊ ဘလောက်များကြားတွင် 30px အကွာအဝေးရှိစေရန် ဘလောက်များကို ရာခိုင်နှုန်းဖြင့်အကျယ် သတ်မှတ်ပေးပါ။

ကြွေပြားအခင်းအကျင်းတွင် တန်းတစ်တန်းလျှင် ဘလောက်ငါးခုဖြစ်လာစေရန်၊ ဘလောက်များကြားတွင် 50px အကွာအဝေးရှိစေရန် ဘလောက်များကို ရာခိုင်နှုန်းဖြင့်အကျယ် သတ်မှတ်ပေးပါ။