CSS ဂရစ်များရှိ ကော်လံအရေအတွက်နှင့် အကျယ်

ဂရစ်တစ်ခုတွင် အလုပ်လုပ်ခြင်းကို မိတ်ဆက်ခြင်းအနေဖြင့် ကျွန်ုပ်တို့သည် ကော်လံအရေအတွက်နှင့် အကျယ်ကို သတ်မှတ်ခြင်းဖြင့် စတင်ပါမည်။ ထိုကော်လံများတလျှောက် ကလေးအစိတ်အပိုင်းများ နေရာချထားမည်ဖြစ်သည်။ ဤအကြောင်းရပ်အတွက် ကျွန်ုပ်တို့သည် grid-template-columns ပိုင်ဆိုင်မှုကို အသုံးပြုမည်၊ ထိုပိုင်ဆိုင်မှုကို မိဘအစိတ်အပိုင်းတွင် ဖော်ပြပြီး ဂရစ်အတွင်းရှိ ကလေးအစိတ်အပိုင်းများ နေရာယူမည့် ကော်လံများ၏ အရေအတွက်နှင့် အကျယ်ကို သတ်မှတ်ပေးသည်။ ပိုင်ဆိုင်မှု၏တန်ဖိုးတွင် ကျွန်ုပ်တို့သည် ကော်လံများ၏အကျယ်ကို ပစ်ဆယ်များဖြင့် ဖော်ပြပါမည်။

ဥပမာ

ပထမဦးစွာ မိဘအစိတ်အပိုင်းတစ်ခုကို ဖန်တီးပြီး ၎င်းကို ဂရစ်ကွန်တိန်နာတစ်ခုအဖြစ် ပြုလုပ်ကြပါစို့။ ကျွန်ုပ်တို့တွင် div တစ်ခုရှိပါစေ၊ ၎င်းအတွင်းတွင် ကလေးအစိတ်အပိုင်းလေးခု တည်ရှိသည်။ ၎င်းအတွက် display ပိုင်ဆိုင်မှုတွင် grid တန်ဖိုးကို သတ်မှတ်ပေးပါ၊ ထို့ပြင် grid-template-columns ပိုင်ဆိုင်မှုတွင် ကော်လံနှစ်ခုအတွက် အကျယ်ကို ရေးသားပါမည်:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 200px 400px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

ဥပမာ

ယခု အရွယ်အစားအမျိုးမျိုးရှိ ကော်လံလေးခုပါသည့် တစ်ခုကို ဖန်တီးကြည့်ကြပါစို့:

<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: 50px 100px 200px 250px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

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

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

ကလေးအစိတ်အပိုင်းများကို 200px အကျယ်ရှိ ကော်လံနှစ်ခုအတွင်း နေရာချထားပါ။

ကလေးအစိတ်အပိုင်းများကို 150px အကျယ်ရှိ ကော်လံသုံးခုအတွင်း နေရာချထားပါ။

ကလေးအစိတ်အပိုင်းများကို ကော်လံသုံးခုအတွင်း နေရာချထားပါ: ပထမကော်လံအကျယ် 100px, ဒုတိယကော်လံအကျယ် 150px, နှင့် တတိယကော်လံအကျယ် 200px ဖြစ်ပါစေ။