အဓိကအကြောင်းအရာသို့ ကျော်သွားပါ။ စာရွက်စာတမ်းလမ်းညွှန်မှုသို့ ကျော်သွားပါ။
in English

CSS Grid

နမူနာများနှင့် ကုဒ်အတိုအထွာများဖြင့် CSS Grid ပေါ်တွင် တည်ဆောက်ထားသော ကျွန်ုပ်တို့၏ အလှည့်ကျ အပြင်အဆင်စနစ်အား ဖွင့်ရန်၊ အသုံးပြုရန်နှင့် စိတ်ကြိုက်ပြင်ဆင်နည်းကို လေ့လာပါ။

Bootstrap ၏မူလဇယားကွက်စနစ်သည် CSS အပြင်အဆင်နည်းပညာများ၏ဆယ်စုနှစ်တစ်ခုကျော်၊ လူသန်းပေါင်းများစွာက ကြိုးစားစမ်းသပ်မှုများ၏ အထွတ်အထိပ်ကိုကိုယ်စားပြုသည်။ သို့သော်၊ ၎င်းကို CSS Grid အသစ်ကဲ့သို့ ဘရောက်ဆာများတွင် ကျွန်ုပ်တို့တွေ့နေရသည့် ခေတ်မီ CSS အင်္ဂါရပ်များနှင့် နည်းပညာများစွာမပါဘဲလည်း ဖန်တီးထားသည်။

သတိပေးချက်- ကျွန်ုပ်တို့၏ CSS Grid စနစ်သည် စမ်းသပ်နေပြီး v5.1.0 မှ ရွေးချယ်ဝင်ရောက်ပါသည်။ သင့်အတွက် သရုပ်ပြရန် ကျွန်ုပ်တို့၏ စာရွက်စာတမ်း၏ 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အလျားလိုက်ကို အစားထိုး ပြီး လုပ်ဆောင်ချက်ပိုတူသည် ။paddingmargin

  • ထို့ကြောင့်၊ s နှင့် မတူဘဲ .rows တွင် .gridအနုတ်လက္ခဏာအနားသတ်များ မရှိတော့ဘဲ ဂရစ်ဂဒ်ရေမြောင်းများကို ပြောင်းလဲရန်အတွက် margin utilities များကို အသုံးမပြုနိုင်ပါ။ ဇယားကွက်ကွက်လပ်များကို ပုံသေအားဖြင့် အလျားလိုက်နှင့် ဒေါင်လိုက် အသုံးချသည်။ အသေးစိတ်အချက်အလက်များအတွက် စိတ်ကြိုက်ပြင်ဆင်ခြင်းကဏ္ဍ ကို ကြည့်ပါ ။

  • အတွင်းလိုင်းနှင့် စိတ်ကြိုက်ပုံစံများကို ပြုပြင်မွမ်းမံသည့်အတန်းများအတွက် အစားထိုးမှုများအဖြစ် ရှုမြင်သင့်သည် (ဥပမာ၊ style="--bs-columns: 3;"vs class="row-cols-3")။

  • Nesting သည် အလားတူလုပ်ဆောင်သော်လည်း၊ nested တစ်ခုစီ၏ ဖြစ်ရပ်တစ်ခုစီတွင် သင့်ကော်လံအရေအတွက်ကို ပြန်လည်သတ်မှတ်ရန် လိုအပ်နိုင်သည် .grid။ အသေးစိတ်အတွက် အသိုက်ကဏ္ဍ ကို ကြည့်ပါ ။

ဥပမာများ

ကော်လံသုံးခု

.g-col-4အတန်း များကိုအသုံးပြုခြင်းဖြင့် viewports နှင့် devices အားလုံးတွင် တူညီသောအကျယ်ကော်လံသုံးခုကို ဖန်တီးနိုင်သည် ။ viewport အရွယ်အစားအလိုက် အပြင်အဆင်ကိုပြောင်းလဲရန် တုံ့ပြန်မှုရှိသောအတန်းများကို ထည့်ပါ ။

.g-col-၄
.g-col-၄
.g-col-၄
<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 နှင့် အထက်ရှိ ကော်လံသုံးခုအထိ တိုးလာပါသည်။

.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
<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 အားလုံးရှိ ဤကော်လံနှစ်ခုအပြင်အဆင်နှင့် နှိုင်းယှဉ်ပါ။

.g-col-၆
.g-col-၆
<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

ထုပ်ပိုးခြင်း။

အလျားလိုက်တွင် အခန်းမရှိတော့သည့်အခါ ဇယားကွက်မှ အရာများကို နောက်တစ်ကြောင်းသို့ အလိုအလျောက် ခြုံပေးသည်။ gapဇယားကွက်အရာများကြား အလျားလိုက်နှင့် ဒေါင်လိုက် ကွာဟချက်များနှင့် သက်ဆိုင်သည်ကို သတိပြုပါ ။

.g-col-၆
.g-col-၆
.g-col-၆
.g-col-၆
<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

.g-col-3 .g-start-2
.g-col-4 .g-start-၆
<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>

ဤအပြုအမူကို ဇယားကွက်ကော်လံအတန်းများနှင့် ရောနှောနိုင်သည်။

.g-col-၆
<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 ပေါ်ရှိ ကော်လံအရေအတွက်ကို .grid12 (ကျွန်ုပ်တို့၏ ပုံသေ) သို့ ပြန်လည်သတ်မှတ်ထားပါသည်။
  • တတိယ အော်တိုကော်လံတွင် အစုအဝေး အကြောင်းအရာ မရှိပါ။

လက်တွေ့တွင်၊ ၎င်းသည် ကျွန်ုပ်တို့၏ မူရင်းဇယားကွက်စနစ်နှင့် နှိုင်းယှဉ်ပါက ပိုမိုရှုပ်ထွေးပြီး စိတ်ကြိုက် အဆင်အပြင်များကို ဖန်တီးနိုင်စေပါသည်။

ပထမဆုံး အော်တိုကော်လံ
အော်တိုကော်လံ
အော်တိုကော်လံ
ဒုတိယ အော်တိုကော်လံ
6 မှ 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အဲဒါပြီးတာနဲ့၊ .gridinstance ဟာ 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>

ကော်လံများနှင့် ကွက်လပ်များ

ကော်လံအရေအတွက်နှင့် ကွာဟချက်ကို ချိန်ညှိပါ။

.g-col-၂
.g-col-၂
<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>
.g-col-၆
.g-col-၄
<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-gapgapကျွန်ုပ်တို့သည် s တွင်အသုံးပြု သည်ကို သတိပြုပါ .grid၊ သို့သော် row-gapလိုအပ်သလို column-gapပြုပြင်နိုင်ပါသည်။

.g-col-၆
.g-col-၆
.g-col-၆
.g-col-၆
<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>

ထို့အတွက်ကြောင့် သင့်တွင် မတူညီသော ဒေါင်လိုက်နှင့် အလျားလိုက် gaps များ ရှိနိုင်သည်၊ ၎င်းသည် တန်ဖိုးတစ်ခုတည်း (ဘက်အားလုံး) သို့မဟုတ် တန်ဖိုးတစ်စုံ (ဒေါင်လိုက်နှင့် အလျားလိုက်) ကို ယူနိုင်သည်။ ၎င်းကို inline style ဖြင့် gap၊ သို့မဟုတ် --bs-gapကျွန်ုပ်တို့၏ CSS variable ဖြင့် အသုံးပြုနိုင်ပါသည်။

.g-col-၆
.g-col-၆
.g-col-၆
.g-col-၆
<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) ရောနှောခြင်းဖြင့် သင်၏ "ကော်လံများ" ကို အရွယ်အစားချဲ့နိုင်သည်။

ကော်လံ ၁၄ ခု
.g-col-၄
<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>