CSS ကွာဟမှု ပိုင်ဆိုင်မှု
ဥပမာ
အတန်းများ နှင့် ကော်လံ များကြား ကွာဟချက် ကို 50px သို့ သတ်မှတ်ပါ-
.grid-container {
gap: 50px;
}
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
ပိုင်ဆိုင်မှု သည် အတန်းများ နှင့် ကော်လံများ gap
ကြားရှိ ကွာဟချက်အရွယ်အစားကို သတ်မှတ်သည် ။ ၎င်းသည် အောက်ပါဂုဏ်သတ္တိများအတွက် အတိုကောက်ဖြစ်သည်။
မှတ်ချက်- ပိုင်ဆိုင်မှု gap
ကို ယခင်က .
grid-gap
မူလတန်ဖိုး: | normal normal |
---|---|
အမွေဆက်ခံသည်- | မဟုတ်ဘူး |
သက်ဝင်လှုပ်ရှားနိုင်သော | ဟုတ်တယ် ကာတွန်း အကြောင်းဖတ်ပါ။ |
ဗားရှင်း- | CSS Box Alignment Module အဆင့် ၃ |
JavaScript syntax- | အရာဝတ္ထု .style.gap="50px 100px" |
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
Property | |||||
---|---|---|---|---|---|
gap (in Multiple Columns) | 66 | 16 | 61 | Not supported | 53 |
gap (in Grid) | 66 | 16 | 61 | 10.1 | 53 |
gap (in Flexbox) | 84 | 84 | 63 | Not supported | 70 |
CSS Syntax
gap: row-gap column-gap;
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description | Play it |
---|---|---|
row-gap | Sets the size of the gap between the rows in a grid layout | |
column-gap | Sets the size of the gap between the columns in a grid layout |
နောက်ထပ် ဥပမာများ
ဥပမာ
အတန်းများကြားရှိ ကွာဟချက်ကို 20px နှင့် ကော်လံများကို 50px သို့ သတ်မှတ်ပါ-
.grid-container {
gap: 20px 50px;
}
ဆက်စပ်စာမျက်နှာများ
CSS သင်ခန်းစာ- CSS Grid Layout
CSS ရည်ညွှန်းချက်- အတန်းကွာဟမှု ပိုင်ဆိုင်မှု
CSS ရည်ညွှန်းချက်- ကော်လံ-ကွာဟမှု ပိုင်ဆိုင်မှု