CSS Grid များတွင် auto တန်ဖိုး၏ အဓိပ္ပာယ်

Grid အတွင်း row များနှင့် column များ၏ အရွယ်အစားများကို သတ်မှတ်သည့်အခါ auto တန်ဖိုးကို အသုံးပြုနိုင်သည်။ ဤကိစ္စတွင်၊ block များသည် pixel များဖြင့် သတ်မှတ်ထားသော အကျယ်ကို နုတ်ပြီးနောက် ကျန်ရှိနေသော ရရှိနိုင်သည့် နေရာအားလုံးကို သာမန်အားဖြင့် ဖြည့်သွားမည်ဖြစ်သည်။ ဥပမာများဖြင့် ကြည့်ရှုကြပါစို့။

ပထမ နှင့် တတိယ column များကို pixel များဖြင့် ပုံသေအကျယ် သတ်မှတ်ပေးပြီး၊ ဒုတိယ 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>

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

ကွဲပြားသော element များကို column နှစ်ခုအတွင်း နေရာချပါ။ ပထမ column ၏ အကျယ်မှာ 200px ဖြစ်ပြီး၊ ဒုတိယ column သည် ကျန်ရှိသော နေရာကို ယူသွားပါစေ။

ကွဲပြားသော element များကို column သုံးခုအတွင်း နေရာချပါ။ ပထမ column ၏ အကျယ်မှာ 100px ဖြစ်ပြီး၊ ဒုတိယ column ၏ အကျယ်မှာ 150px ဖြစ်ကာ၊ တတိယ column သည် ကျန်ရှိသော နေရာကို ယူသွားပါစေ။