grid-auto-flow ဂုဏ်သတ္တိ

grid-auto-flow ဂုဏ်သတ္တိသည် ဂရစ်တွင် အရာဝတ္ထုများကို အလိုအလျောက် နေရာချပေးသည်။ တန်ဖိုး row - အတန်းများကို အရာဝတ္ထုများဖြင့် ဖြည့်သည်၊ column - ကော်လံများ၊ dense - ဂရစ်အတွင်းရှိ လွတ်နေသောနေရာများအားလုံးတွင် အရာဝတ္ထုများကို နေရာချသည်; row dense - အတန်းတစ်ခုစီနှင့် ဂရစ်အတွင်းရှိ လွတ်နေသောနေရာများအားလုံးကို ဖြည့်ကာ အရာဝတ္ထုများကို နေရာချသည်; column dense - ကော်လံတစ်ခုစီနှင့် ဂရစ်အတွင်းရှိ လွတ်နေသောနေရာများအားလုံးကို အရာဝတ္ထုများဖြင့် ဖြည့်သည်။

ဝါကျဖွဲ့ပုံ

selector {
	grid-auto-flow: grid ၏ဖြည့်ရမည့်အပိုင်း;
}

ဥပမာ

ဇယားအတွင်းရှိ အတန်းအားလုံးကို ဖြည့်ကြည့်ကြပါစို့:

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

#parent {
	display: grid;
	grid-auto-flow: row;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#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>

#parent {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#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>

#parent {
	display: grid;
	grid-auto-flow: dense;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#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>

#parent {
	display: grid;
	grid-auto-flow: row dense;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#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>

#parent {
	display: grid;
	grid-auto-flow: column dense;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

ဒါလည်း ကြည့်ပါ

grid ဂုဏ်သတ္တိ,
ထိုဂုဏ်သတ္တိသည် ကော်လံနှင့် အတန်းများ၏ ဂုဏ်သတ္တိများအတွက် အတိုကောက်ရေးထုံးကို သတ်မှတ်ပေးသည်
grid-auto-rows ဂုဏ်သတ္တိ,
ထိုဂုဏ်သတ္တိသည် မဖော်ပြထားသောဂရစ်တွင် အတန်းများ၏ အရေအတွက်နှင့် အနံကို သတ်မှတ်ပေးသည်
grid-template-columns ဂုဏ်သတ္တိ,
ထိုဂုဏ်သတ္တိသည် ဂရစ်တွင် ကော်လံများ၏ အရေအတွက်နှင့် အနံကို သတ်မှတ်ပေးသည်
grid-template-rows ဂုဏ်သတ္တိ,
ထိုဂုဏ်သတ္တိသည် ဂရစ်တွင် အတန်းများ၏ အရေအတွက်နှင့် အနံကို သတ်မှတ်ပေးသည်