CSS Grid Layout Module
ခေါင်းစီး
မီနူး
အဓိက
မှန်တယ်။
အောက်ခြေမှတ်တိုင်
ဇယားကွက် အပြင်အဆင်
CSS Grid Layout Module သည် floats နှင့် positioning ကိုအသုံးပြုစရာမလိုဘဲ ဝဘ်စာမျက်နှာများကို ဒီဇိုင်းဆွဲရန် လွယ်ကူစေရန် အတန်းများနှင့် ကော်လံများပါရှိသော grid-based layout system ကို ပေးဆောင်ပါသည်။
Browser ပံ့ပိုးမှု
ဂရစ်ဂုဏ်သတ္တိများကို ခေတ်မီဘရောက်ဆာများအားလုံးတွင် ပံ့ပိုးထားသည်။
| 57.0 | 16.0 | 52.0 | 10 | 44 |
ဂရစ်ဒြပ်များ
ဇယားကွက်အပြင်အဆင်တွင် တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုသော ကလေးဒြပ်စင်များပါရှိသော ပင်မဒြပ်စင်တစ်ခု ပါဝင်ပါသည်။
ဥပမာ
<div
class="grid-container">
<div class="grid-item">1</div>
<div
class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div
class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div
class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
1
2
3
4
5
6
7
8
9
ပိုင်ဆိုင်မှုပြသခြင်း။
HTML ဒြပ်စင်တစ်ခုသည် ၎င်း၏ displayပိုင်ဆိုင်မှုကို သတ်မှတ်
သည့်အခါ gridသို့မဟုတ် ဇယားကွက်တစ်ခု ဖြစ်လာသည် inline-grid။
ဥပမာ
.grid-container {
display: grid;
}
ဥပမာ
.grid-container {
display: inline-grid;
}
ဂရစ်ကွန်တိန်နာ၏ တိုက်ရိုက်ကလေးများအားလုံးသည် အလိုအလျောက် ဇယားကွက်များ ဖြစ်လာသည် ။
Grid ကော်လံများ
ဇယားကွက်အရာများ၏ ဒေါင်လိုက်မျဉ်းများကို ကော်လံများ ဟုခေါ်သည် ။
Grid အတန်းများ
ဂရစ်ပစ္စည်းများ၏ အလျားလိုက်မျဥ်းများကို row ဟုခေါ်သည် ။
ဇယားကွက်များ
ကော်လံ/အတန်းတစ်ခုစီကြားရှိ space များကို gap ဟုခေါ်သည် ။
အောက်ပါဂုဏ်သတ္တိများထဲမှ တစ်ခုကို အသုံးပြု၍ ကွာဟချက်အရွယ်အစားကို သင် ချိန်ညှိနိုင်သည်။
grid-column-gapgrid-row-gapgrid-gap
ဥပမာ
ပိုင်ဆိုင်မှု သည် grid-column-gapကော်လံများကြား ကွာဟချက်ကို သတ်မှတ်သည်-
.grid-container {
display: grid;
grid-column-gap: 50px;
}
ဥပမာ
ပိုင်ဆိုင်မှု သည် grid-row-gapအတန်းများကြား ကွာဟမှုကို သတ်မှတ်သည်-
.grid-container {
display: grid;
grid-row-gap: 50px;
}
ဥပမာ
ပိုင်ဆိုင်မှု သည် ပိုင်ဆိုင်မှု နှင့်
grid-gapပိုင်ဆိုင်မှုများအတွက် အတိုကောက်ဖြစ်သည်
။grid-row-gapgrid-column-gap
.grid-container {
display: grid;
grid-gap: 50px 100px;
}
ဥပမာ
grid-gapတန်ဖိုးတစ်ခုတည်းတွင် row gap နှင့် column gap နှစ်ခုလုံးကို သတ်မှတ်ရန် ပိုင်ဆိုင်မှုကို အသုံးပြုနိုင်သည် ။
.grid-container {
display: grid;
grid-gap: 50px;
}
ဂရစ်လိုင်းများ
ကော်လံများကြား မျဉ်းကြောင်းများကို ကော်လံလိုင်းများ ဟုခေါ်သည် ။
အတန်းများကြားတွင် မျဉ်းကြောင်းများကို အတန်းလိုင်းများ ဟုခေါ်သည် ။
ဇယားကွက်အရာတစ်ခုကို ဇယားကွက်တစ်ခုတွင် ထည့်သည့်အခါ လိုင်းနံပါတ်များကို ကိုးကားပါ-
ဥပမာ
ကော်လံလိုင်း 1 တွင် ဇယားကွက်တစ်ခုကို ထားရှိကာ ကော်လံလိုင်း 3 တွင် အဆုံးသတ်ပါစေ-
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
ဥပမာ
အတန်းလိုင်း 1 တွင် ဇယားကွက်တစ်ခုကို ထားကာ အတန်းလိုင်း 3 တွင် အဆုံးသတ်ပါစေ-
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
CSS Grid Properties အားလုံး
| Property | Description |
|---|---|
| column-gap | Specifies the gap between the columns |
| gap | A shorthand property for the row-gap and the column-gap properties |
| grid | A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties |
| grid-area | Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties |
| grid-auto-columns | Specifies a default column size |
| grid-auto-flow | Specifies how auto-placed items are inserted in the grid |
| grid-auto-rows | Specifies a default row size |
| grid-column | A shorthand property for the grid-column-start and the grid-column-end properties |
| grid-column-end | Specifies where to end the grid item |
| grid-column-gap | Specifies the size of the gap between columns |
| grid-column-start | Specifies where to start the grid item |
| grid-gap | A shorthand property for the grid-row-gap and grid-column-gap properties |
| grid-row | A shorthand property for the grid-row-start and the grid-row-end properties |
| grid-row-end | Specifies where to end the grid item |
| grid-row-gap | Specifies the size of the gap between rows |
| grid-row-start | Specifies where to start the grid item |
| grid-template | A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties |
| grid-template-areas | Specifies how to display columns and rows, using named grid items |
| grid-template-columns | Specifies the size of the columns, and how many columns in a grid layout |
| grid-template-rows | Specifies the size of the rows in a grid layout |
| row-gap | Specifies the gap between the grid rows |