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

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

ဝါကျဖွဲ့ပုံ

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

ဥပမာ

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

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

css#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;
}

Результат:

ဥပမာ

ယခုတော့ ဇယားအတွင်းရှိ ကော်လံအားလုံးကို အရာဝတ္ထုများဖြင့် ဖြည့်ကြည့်ကြပါစို့:

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

css#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;
}

Результат:

ဥပမာ

ဂရစ်အတွင်းတွင် လွတ်နေသောနေရာ မကျန်ရစ်စေရန် အရာဝတ္ထုအားလုံးကို ဇယားထဲတွင် နေရာချကြည့်ကြပါစို့:

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

css#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;
}

Результат:

ဥပမာ

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

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

css#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;
}

Результат:

ဥပမာ

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

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

css#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;
}

Результат:

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