CSS Grid
နမူနာများနှင့် ကုဒ်အတိုအထွာများဖြင့် CSS Grid ပေါ်တွင် တည်ဆောက်ထားသော ကျွန်ုပ်တို့၏ အလှည့်ကျ အပြင်အဆင်စနစ်အား ဖွင့်ရန်၊ အသုံးပြုရန်နှင့် စိတ်ကြိုက်ပြင်ဆင်နည်းကို လေ့လာပါ။
Bootstrap ၏မူလဇယားကွက်စနစ်သည် CSS အပြင်အဆင်နည်းပညာများ၏ဆယ်စုနှစ်တစ်ခုကျော်၊ လူသန်းပေါင်းများစွာက ကြိုးစားစမ်းသပ်မှုများ၏ အထွတ်အထိပ်ကိုကိုယ်စားပြုသည်။ သို့သော်၊ ၎င်းကို CSS Grid အသစ်ကဲ့သို့ ဘရောက်ဆာများတွင် ကျွန်ုပ်တို့တွေ့နေရသည့် ခေတ်မီ CSS အင်္ဂါရပ်များနှင့် နည်းပညာများစွာမပါဘဲလည်း ဖန်တီးထားသည်။
ဘယ်လိုအလုပ်လုပ်လဲ
Bootstrap 5 ဖြင့်၊ ကျွန်ုပ်တို့သည် CSS Grid တွင်တည်ဆောက်ထားသော သီးခြား grid စနစ်တစ်ခုကိုဖွင့်ရန် ရွေးချယ်ခွင့်ကို ထည့်သွင်းထားသော်လည်း Bootstrap လှည့်ကွက်ဖြင့် ပြုလုပ်ထားသည်။ တုံ့ပြန်မှုရှိသော အပြင်အဆင်များတည်ဆောက်ရန် စိတ်အားထက်သန်စွာဖြင့် အတန်းများကို သင်ရရှိနိုင်သေးသော်လည်း ဘောင်အောက်တွင် ကွဲပြားသောချဉ်းကပ်မှုဖြင့် သင်လုပ်ဆောင်နိုင်ပါသည်။
-
CSS Grid သည် ရွေးချယ်ဝင်ရောက်သည်။
$enable-grid-classes: false
ဆက်တင် ဖြင့် CSS Grid ကိုဖွင့်ပြီး default grid system ကို disable လုပ်ပါ$enable-cssgrid: true
။ ထို့နောက် သင်၏ Sass ကို ပြန်လည်ပေါင်းစည်းပါ။ -
ဖြစ်ရပ်များကို ဖြင့် အစားထိုး
.row
ပါ.grid
။.grid
အတန်းသည် သင်၏ HTML ဖြင့် သင်တည်ဆောက်ထားသည့်အရာကိုdisplay: grid
သတ်မှတ်ပြီး ဖန်တီးပေးသည် ။grid-template
-
.col-*
အတန်းများကို အတန်းများနှင့် အစားထိုးပါ.g-col-*
။ အဘယ်ကြောင့်ဆိုသော် ကျွန်ုပ်တို့၏ CSS Grid ကော်လံများသည်grid-column
ပိုင်ဆိုင်မှုအစား ပိုင်ဆိုင်မှုကို အသုံးပြုသောကြောင့်ဖြစ်သည်width
။ -
ကော်လံများနှင့် ရေမြောင်းအရွယ်အစားများကို CSS variable များမှတစ်ဆင့် သတ်မှတ်သည်။ ၎င်းတို့ကို မိဘပေါ်တွင် သတ်မှတ်ပြီး
.grid
သင်အလိုရှိသောအတိုင်း၊ အတွင်းလိုင်း သို့မဟုတ် ပုံစံစာရွက်တစ်ခု၊--bs-columns
နှင့်--bs-gap
.
gap
ပိုင်ဆိုင်မှုသည် flexbox အတွက် ဘရောက်ဆာ ပံ့ပိုးမှု အပြည့်အဝနီးပါး ရရှိထားပြီး ဖြစ်သောကြောင့် အနာဂတ်တွင်၊ Bootstrap သည် ပေါင်းစပ်ဖြေရှင်းချက်သို့ ပြောင်းသွားဖွယ်ရှိသည် ။
အဓိကကွာခြားချက်များ
မူလဇယားကွက်စနစ်နှင့် နှိုင်းယှဉ်ထားသည်-
-
Flex utilities များသည် CSS Grid ကော်လံများကို အလားတူနည်းလမ်းဖြင့် မထိခိုက်စေပါ။
-
ကွာဟချက်သည် ရေမြောင်းများကို အစားထိုးသည်။ ပိုင်ဆိုင်မှုသည် ကျွန်ုပ်တို့၏ မူလ ဇယားကွက်စနစ်မှ
gap
အလျားလိုက်ကို အစားထိုး ပြီး လုပ်ဆောင်ချက်ပိုတူသည် ။padding
margin
-
ထို့ကြောင့်၊ s နှင့် မတူဘဲ
.row
s တွင်.grid
အနုတ်လက္ခဏာအနားသတ်များ မရှိတော့ဘဲ ဂရစ်ဂဒ်ရေမြောင်းများကို ပြောင်းလဲရန်အတွက် margin utilities များကို အသုံးမပြုနိုင်ပါ။ ဇယားကွက်ကွက်လပ်များကို ပုံသေအားဖြင့် အလျားလိုက်နှင့် ဒေါင်လိုက် အသုံးချသည်။ အသေးစိတ်အချက်အလက်များအတွက် စိတ်ကြိုက်ပြင်ဆင်ခြင်းကဏ္ဍ ကို ကြည့်ပါ ။ -
အတွင်းလိုင်းနှင့် စိတ်ကြိုက်ပုံစံများကို ပြုပြင်မွမ်းမံသည့်အတန်းများအတွက် အစားထိုးမှုများအဖြစ် ရှုမြင်သင့်သည် (ဥပမာ၊
style="--bs-columns: 3;"
vsclass="row-cols-3"
)။ -
Nesting သည် အလားတူလုပ်ဆောင်သော်လည်း၊ nested တစ်ခုစီ၏ ဖြစ်ရပ်တစ်ခုစီတွင် သင့်ကော်လံအရေအတွက်ကို ပြန်လည်သတ်မှတ်ရန် လိုအပ်နိုင်သည်
.grid
။ အသေးစိတ်အတွက် အသိုက်ကဏ္ဍ ကို ကြည့်ပါ ။
ဥပမာများ
ကော်လံသုံးခု
.g-col-4
အတန်း များကိုအသုံးပြုခြင်းဖြင့် viewports နှင့် devices အားလုံးတွင် တူညီသောအကျယ်ကော်လံသုံးခုကို ဖန်တီးနိုင်သည် ။ viewport အရွယ်အစားအလိုက် အပြင်အဆင်ကိုပြောင်းလဲရန် တုံ့ပြန်မှုရှိသောအတန်းများကို ထည့်ပါ ။
<div class="grid">
<div class="g-col-4">.g-col-4</div>
<div class="g-col-4">.g-col-4</div>
<div class="g-col-4">.g-col-4</div>
</div>
တုံ့ပြန်မှု
Viewports တစ်လျှောက်တွင် သင်၏ အပြင်အဆင်ကို ချိန်ညှိရန် တုံ့ပြန်မှုရှိသော အတန်းများကို သုံးပါ။ ဤနေရာတွင် ကျွန်ုပ်တို့သည် အကျဉ်းဆုံး viewports တွင် ကော်လံနှစ်ခုဖြင့် စတင်ပြီး medium viewports နှင့် အထက်ရှိ ကော်လံသုံးခုအထိ တိုးလာပါသည်။
<div class="grid">
<div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
<div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
<div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>
၎င်းကို viewports အားလုံးရှိ ဤကော်လံနှစ်ခုအပြင်အဆင်နှင့် နှိုင်းယှဉ်ပါ။
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
ထုပ်ပိုးခြင်း။
အလျားလိုက်တွင် အခန်းမရှိတော့သည့်အခါ ဇယားကွက်မှ အရာများကို နောက်တစ်ကြောင်းသို့ အလိုအလျောက် ခြုံပေးသည်။ gap
ဇယားကွက်အရာများကြား အလျားလိုက်နှင့် ဒေါင်လိုက် ကွာဟချက်များနှင့် သက်ဆိုင်သည်ကို သတိပြုပါ ။
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
စတင်သည်။
ကျွန်ုပ်တို့၏ မူလဇယားကွက်၏ အော့ဖ်ဆက်အတန်းများကို အစားထိုးရန် ရည်ရွယ်သော အတန်းများကို စတင်ရန် ရည်ရွယ်သော်လည်း ၎င်းတို့သည် လုံး၀ မတူပါ။ CSS Grid သည် ဘရောက်ဆာများအား "ဤကော်လံတွင်စတင်ရန်" နှင့် "ဤကော်လံတွင်အဆုံးသတ်ရန်" ကိုပြောသောစတိုင်များဖြင့် ဂရစ်ပုံစံပုံစံတစ်ခုကို ဖန်တီးသည်။ ထိုဂုဏ်သတ္တိများ grid-column-start
နှင့် grid-column-end
. စတင်အတန်းများသည် ယခင်အတွက် အတိုကောက်ဖြစ်သည်။ ၎င်းတို့ကို ကော်လံများကို အရွယ်အစားနှင့် တွဲပြီး သင့်ကော်လံများကို သင်လိုအပ်သလို ချိန်ညှိပါ။ ဤဂုဏ်သတ္တိများအတွက် မမှန်ကန်သော တန်ဖိုး 1
တစ်ခုအဖြစ် စတင်အတန်းများ စတင်သည် ။0
<div class="grid">
<div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
<div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>
အော်တိုကော်လံများ
ဇယားကွက်တွင် အတန်းများမရှိသောအခါ (တစ်ခု၏ချက်ချင်းကလေးများ .grid
)၊ ဂရစ်တစ်ခုစီသည် ကော်လံတစ်ခုအထိ အလိုအလျောက် အရွယ်အစားရှိမည်ဖြစ်သည်။
<div class="grid">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
ဤအပြုအမူကို ဇယားကွက်ကော်လံအတန်းများနှင့် ရောနှောနိုင်သည်။
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
အသိုက်
.grid
ကျွန်ုပ်တို့၏ မူရင်းဇယားကွက်စနစ်နှင့် အလားတူ၊ ကျွန်ုပ်တို့၏ CSS Grid သည် s ကို လွယ်ကူစွာ nesting ပြုလုပ်နိုင်စေပါသည် ။ သို့သော်၊ မူရင်းနှင့်မတူဘဲ၊ ဤဇယားကွက်သည် အတန်းများ၊ ကော်လံများနှင့် ကွာဟချက်များရှိ အပြောင်းအလဲများကို အမွေဆက်ခံပါသည်။ အောက်ပါ ဥပမာကို သုံးသပ်ကြည့်ပါ။
- ကျွန်ုပ်တို့သည် ဒေသဆိုင်ရာ CSS variable ဖြင့် မူရင်းကော်လံအရေအတွက်ကို အစားထိုး
--bs-columns: 3
ပါသည်။ - ပထမဆုံး အော်တိုကော်လံတွင်၊ ကော်လံအရေအတွက်ကို အမွေဆက်ခံထားပြီး ကော်လံတစ်ခုစီသည် ရရှိနိုင်သောအကျယ်၏ သုံးပုံတစ်ပုံဖြစ်သည်။
- ဒုတိယ auto-column တွင်၊ ကျွန်ုပ်တို့သည် nested ပေါ်ရှိ ကော်လံအရေအတွက်ကို
.grid
12 (ကျွန်ုပ်တို့၏ ပုံသေ) သို့ ပြန်လည်သတ်မှတ်ထားပါသည်။ - တတိယ အော်တိုကော်လံတွင် အစုအဝေး အကြောင်းအရာ မရှိပါ။
လက်တွေ့တွင်၊ ၎င်းသည် ကျွန်ုပ်တို့၏ မူရင်းဇယားကွက်စနစ်နှင့် နှိုင်းယှဉ်ပါက ပိုမိုရှုပ်ထွေးပြီး စိတ်ကြိုက် အဆင်အပြင်များကို ဖန်တီးနိုင်စေပါသည်။
<div class="grid" style="--bs-columns: 3;">
<div>
First auto-column
<div class="grid">
<div>Auto-column</div>
<div>Auto-column</div>
</div>
</div>
<div>
Second auto-column
<div class="grid" style="--bs-columns: 12;">
<div class="g-col-6">6 of 12</div>
<div class="g-col-4">4 of 12</div>
<div class="g-col-2">2 of 12</div>
</div>
</div>
<div>Third auto-column</div>
</div>
စိတ်တိုင်းကျ
ကော်လံအရေအတွက်၊ အတန်းအရေအတွက်နှင့် ကွက်လပ်များ၏ အကျယ်ကို ဒေသဆိုင်ရာ CSS ကိန်းရှင်များဖြင့် စိတ်ကြိုက်ပြင်ဆင်ပါ။
ပြောင်းလဲနိုင်သော | နောက်ပြန်တန်ဖိုး | ဖော်ပြချက် |
---|---|---|
--bs-rows |
1 |
သင့်ဇယားကွက် နမူနာပုံစံရှိ အတန်းအရေအတွက် |
--bs-columns |
12 |
သင့်ဇယားကွက် နမူနာပုံစံရှိ ကော်လံအရေအတွက် |
--bs-gap |
1.5rem |
ကော်လံများကြား ကွာဟချက် အရွယ်အစား (ဒေါင်လိုက်နှင့် အလျားလိုက်) |
ဤ CSS ကိန်းရှင်များသည် ပုံသေတန်ဖိုးမရှိပါ။ ယင်းအစား၊ ၎င်းတို့သည် ဒေသန္တရ စံနမူနာကို ပံ့ပိုးမထားပါ ။ ဥပမာအားဖြင့်၊ မည်သည့်နေရာတွင်မှ မသတ်မှတ်ရသေးသောကြောင့် var(--bs-rows, 1)
လျစ်လျူရှုထားသည့် ကျွန်ုပ်တို့၏ CSS Grid အတန်းများအတွက် အသုံးပြုပါသည်။ --bs-rows
အဲဒါပြီးတာနဲ့၊ .grid
instance ဟာ fallback value အစား အဲဒီတန်ဖိုးကို သုံးပါလိမ့်မယ် 1
။
ဇယားကွက်များ မရှိပါ။
.grid
အတန်းအစား များကို အတိအကျမထည့်ဘဲ ၎င်းတို့သည် ဇယားကွက်များပါရှိသော အစိတ်အပိုင်းများဖြစ်သည် .g-col
။
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
ကော်လံများနှင့် ကွက်လပ်များ
ကော်လံအရေအတွက်နှင့် ကွာဟချက်ကို ချိန်ညှိပါ။
<div class="grid" style="--bs-columns: 4; --bs-gap: 5rem;">
<div class="g-col-2">.g-col-2</div>
<div class="g-col-2">.g-col-2</div>
</div>
<div class="grid" style="--bs-columns: 10; --bs-gap: 1rem;">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-4">.g-col-4</div>
</div>
အတန်းများထည့်ခြင်း။
နောက်ထပ်အတန်းများထည့်ခြင်းနှင့် ကော်လံများ၏နေရာချထားမှုကို ပြောင်းလဲခြင်း-
<div class="grid" style="--bs-rows: 3; --bs-columns: 3;">
<div>Auto-column</div>
<div class="g-start-2" style="grid-row: 2">Auto-column</div>
<div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>
ကွာဟချက်
ဒေါင်လိုက် ကွာဟချက်များကို ပြင်ဆင်ခြင်းဖြင့်သာ ပြောင်းလဲပါ row-gap
။ gap
ကျွန်ုပ်တို့သည် s တွင်အသုံးပြု သည်ကို သတိပြုပါ .grid
၊ သို့သော် row-gap
လိုအပ်သလို column-gap
ပြုပြင်နိုင်ပါသည်။
<div class="grid" style="row-gap: 0;">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
ထို့အတွက်ကြောင့် သင့်တွင် မတူညီသော ဒေါင်လိုက်နှင့် အလျားလိုက် gap
s များ ရှိနိုင်သည်၊ ၎င်းသည် တန်ဖိုးတစ်ခုတည်း (ဘက်အားလုံး) သို့မဟုတ် တန်ဖိုးတစ်စုံ (ဒေါင်လိုက်နှင့် အလျားလိုက်) ကို ယူနိုင်သည်။ ၎င်းကို inline style ဖြင့် gap
၊ သို့မဟုတ် --bs-gap
ကျွန်ုပ်တို့၏ CSS variable ဖြင့် အသုံးပြုနိုင်ပါသည်။
<div class="grid" style="--bs-gap: .25rem 1rem;">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
ဆူး
CSS Grid ၏ ကန့်သတ်ချက်တစ်ခုမှာ ကျွန်ုပ်တို့၏ default class များကို Sass variable နှစ်ခုဖြင့် ထုတ်လုပ်ဆဲဖြစ်ပြီး၊ $grid-columns
နှင့် $grid-gutter-width
. ၎င်းသည် ကျွန်ုပ်တို့ပြုစုထားသော CSS တွင် ထုတ်ပေးသည့် အတန်းအရေအတွက်ကို ထိရောက်စွာ ကြိုတင်သတ်မှတ်ပေးသည်။ ဤနေရာတွင် သင့်တွင် ရွေးချယ်စရာနှစ်ခုရှိသည်။
- ထိုမူလ Sass ကွဲလွဲချက်များကို ပြင်ဆင်ပြီး သင်၏ CSS ကို ပြန်လည်စုစည်းပါ။
- ပေးထားသော အတန်းများကို တိုးမြှင့်ရန် အတွင်းလိုင်း သို့မဟုတ် စိတ်ကြိုက်စတိုင်များကို အသုံးပြုပါ။
ဥပမာအားဖြင့်၊ သင်သည် ကော်လံအရေအတွက်ကို တိုးမြှင့်နိုင်ပြီး ကွာဟချက်အရွယ်အစားကို ပြောင်းလဲနိုင်ပြီး၊ ထို့နောက်တွင် inline ပုံစံများနှင့် ကြိုတင်သတ်မှတ်ထားသော CSS Grid ကော်လံအတန်းများ (ဥပမာ၊ .g-col-4
) ရောနှောခြင်းဖြင့် သင်၏ "ကော်လံများ" ကို အရွယ်အစားချဲ့နိုင်သည်။
<div class="grid" style="--bs-columns: 18; --bs-gap: .5rem;">
<div style="grid-column: span 14;">14 columns</div>
<div class="g-col-4">.g-col-4</div>
</div>