CSS Grid ကွန်တိန်နာ
၁
၂
၃
၄
၅
၆
၇
၈
ဂရစ်ကွန်တိန်နာ
HTML ဒြပ်စင်တစ်ခုအား grid container အဖြစ် ပြုမူစေရန်၊ သင်သည် display
ပိုင်ဆိုင်မှုကို
grid
သို့မဟုတ် inline-grid
.
ဂရစ်ကွန်တိန်နာများတွင် ကော်လံများနှင့် အတန်းများအတွင်းတွင် ဇယားကွက်များပါ၀င်သည်။
grid-template-columns Property
ပိုင်ဆိုင်မှု သည် grid-template-columns
သင့်ဇယားကွက်အပြင်အဆင်ရှိ ကော်လံအရေအတွက်ကို သတ်မှတ်ပေးပြီး ကော်လံတစ်ခုစီ၏ အကျယ်ကို သတ်မှတ်ပေးနိုင်သည်။
တန်ဖိုးသည် သက်ဆိုင်ရာ ကော်လံ၏ အကျယ်ကို သတ်မှတ်ပေးသည့် တန်ဖိုးတစ်ခုစီမှ နေရာလွတ် ခြားထားသော စာရင်းတစ်ခုဖြစ်သည်။
သင့်ဇယားကွက်အပြင်အဆင်တွင် ကော်လံ 4 ခုပါလိုပါက၊ ကော်လံ 4 ခု၏ အကျယ်ကို သတ်မှတ်ပါ သို့မဟုတ် ကော်လံအားလုံးသည် တူညီသောအကျယ်ရှိသင့်လျှင် "အလိုအလျောက်" ကို သတ်မှတ်ပါ။
ဥပမာ
ကော်လံ ၄ ခုဖြင့် ဇယားကွက်တစ်ခု ပြုလုပ်ပါ-
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
မှတ်ချက်- ကော်လံဇယားကွက် 4 ခုတွင် အကြောင်းအရာ 4 ခုထက်ပိုပါက၊ ဇယားကွက်သည် အတန်းအသစ်တစ်ခုကို အလိုအလျောက်ထည့်သွင်းပေးမည်ဖြစ်သည်။
ကော်လံ များ၏ grid-template-columns
အရွယ်အစား (အနံ) ကို သတ်မှတ်ရန် ပိုင်ဆိုင်မှုကိုလည်း အသုံးပြုနိုင်သည်။
ဥပမာ
ကော်လံ 4 ခုအတွက် အရွယ်အစားကို သတ်မှတ်ပါ-
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
grid-template-rows Property
ပိုင်ဆိုင်မှုသည် အတန်းတစ်ခုစီ ၏ grid-template-rows
အမြင့်ကို သတ်မှတ်သည်။
၁
၂
၃
၄
၅
၆
၇
၈
တန်ဖိုးသည် သက်ဆိုင်ရာအတန်း၏ အမြင့်ကို သတ်မှတ်ပေးသည့် တန်ဖိုးတစ်ခုစီမှ နေရာလွတ်-ခြားထားသော-စာရင်းတစ်ခုဖြစ်သည်။
ဥပမာ
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
အကြောင်းပြ-အကြောင်းအရာ ပိုင်ဆိုင်မှု
ကွန်တိန်နာ အတွင်းရှိ justify-content
ဇယားကွက်တစ်ခုလုံးကို ချိန်ညှိရန် ပိုင်ဆိုင်မှုကို အသုံးပြုသည်။
၁
၂
၃
၄
၅
၆
မှတ်ချက်-justify-content
ပိုင်ဆိုင်မှုတစ်စုံတစ်ရာသက်ရောက်မှုရှိစေရန် ဂရစ်၏စုစုပေါင်းအကျယ်သည် ကွန်တိန်နာ၏အကျယ်ထက် နည်းနေ ရပါမည်။
ဥပမာ
.grid-container {
display: grid;
justify-content: space-evenly;
}
ဥပမာ
.grid-container {
display: grid;
justify-content: space-around;
}
ဥပမာ
.grid-container {
display: grid;
justify-content: space-between;
}
ဥပမာ
.grid-container {
display: grid;
justify-content: center;
}
ဥပမာ
.grid-container {
display: grid;
justify-content: start;
}
ဥပမာ
.grid-container {
display: grid;
justify-content: end;
}
align-content Property
ကွန်တိန်နာ အတွင်းရှိ ဂရစ်တစ်ခုလုံးကို
ဒေါင်လိုက်align-content
ချိန်ညှိ ရန်အတွက် ပိုင်ဆိုင်မှုကို အသုံးပြုသည် ။
1
2
3
4
5
6
မှတ်ချက်-align-content
ပိုင်ဆိုင်မှုတစ်စုံတစ်ရာသက်ရောက်မှုရှိ စေရန်အတွက် ဂရစ်၏စုစုပေါင်းအမြင့်သည် ကွန်တိန်နာ၏အမြင့်ထက် နည်းနေ ရပါမည်။
ဥပမာ
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
ဥပမာ
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
ဥပမာ
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
ဥပမာ
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
ဥပမာ
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
ဥပမာ
.grid-container {
display: grid;
height: 400px;
align-content: end;
}