CSS grid-auto-flow Property
ဥပမာ
ကော်လံအလိုက် အလိုအလျောက် နေရာချထားသည့် အရာများကို ကော်လံကို ထည့်သွင်းပါ-
.grid-container {
display: grid;
grid-auto-flow:
column;
}
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
grid-auto-flow
ပိုင်ဆိုင်မှုသည် ဇယားကွက်အတွင်း အလိုအလျောက်ထည့်သွင်းထားသည့်အရာများကို မည်သို့ထည့်သွင်းမည်ကို ထိန်းချုပ်သည် ။
မူလတန်ဖိုး: | အတန်း |
---|---|
အမွေဆက်ခံသည်- | မဟုတ်ဘူး |
သက်ဝင်လှုပ်ရှားနိုင်သော | ဟုတ်တယ် ကာတွန်း အကြောင်းဖတ်ပါ။ |
ဗားရှင်း- | CSS Grid Layout Module အဆင့် ၁ |
JavaScript syntax- | အရာဝတ္ထု .style.gridAutoFlow="row သိပ်သည်း" |
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
Property | |||||
---|---|---|---|---|---|
grid-auto-flow | 57 | 16 | 52 | 10 | 44 |
CSS Syntax
grid-auto-flow:
row|column|dense|row dense|column dense;
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description | Play it |
---|---|---|
row | Default value. Places items by filling each row | |
column | Places items by filling each column | |
dense | Place items to fill any holes in the grid | |
row dense | Places items by filling each row, and fill any holes in the grid | |
column dense | Places items by filling each column, and fill any holes in the grid |
နောက်ထပ် ဥပမာများ
ဥပမာ
"သိပ်သည်းသော" တန်ဖိုးကို ပေါင်းထည့်ခြင်းဖြင့် ဇယားကွက်ရှိ အပေါက်များကို ဖြည့်ပါ-
.grid-container {
display: grid;
grid-auto-flow: row
dense;
}
ဆက်စပ်စာမျက်နှာများ
CSS သင်ခန်းစာ- CSS Grid Layout