CSS Grids တွင် Row နှင့် Column များအတွက် အတိုကောက်ပုံစံ

Row နှင့် Column အရွယ်အစားများကို အတိုကောက်ပုံစံဖြင့် ဖော်ပြရန် အဆင်ပြေသည့် အခြေအနေများ ရှိပါသည်။ ဤအတွက် ကျွန်ုပ်တို့သည် grid-template property ကို အသုံးပြုပါသည်။ ထို property ကို parent element တွင် သတ်မှတ်ပြီး grid-template-rows နှင့် grid-template-columns property နှစ်ခုကို အတိုကောက်ရေးထားသည့် ပုံစံဖြစ်သည်။

Grid container အတွက် row နှင့် column များကို slash (/) ဖြင့် ခွဲခြားဖော်ပြပြီး ၎င်းတို့၏ အရွယ်အစားများကို တိုင်းတာမှုယူနစ်များဖြင့် သတ်မှတ်ပါသည်။

ဥပမာ

grid-template 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: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

ဥပမာ

ယခု ဒုတိယနှင့် တတိယ row များကို တူညီသော အမြင့်ပေးကာ column တစ်ခုစီကို ကွဲပြားသော အကျယ်ပေးကြပါစို့။

<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: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

ဥပမာ

ယခု ယခင် ဥပမာမှ ဇယားအတွင်း ထိပ်ဆုံး row ၏ အမြင့်ကို fr 2 ခု ဖြစ်စေပြီး ပထမ column ၏ အကျယ်ကို fr တစ်ဝက် ဖြစ်စေကြပါစို့။

<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: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

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

အောက်ပါ tile ကို အကောင်အထည်ဖော်ပါ။