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အလျားလိုက်ကို အစားထိုး ပြီး လုပ်ဆောင်ချက်ပိုတူသည် ။paddingmargin

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

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

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

ဥပမာများ

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

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

<div class="grid text-center">
  <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 viewport နှင့် အထက်ရှိ ကော်လံသုံးခုအထိ ကြီးထွားလာပါသည်။

<div class="grid text-center">
  <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 text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

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

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

<div class="grid text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 (ကျွန်ုပ်တို့၏ ပုံသေ) သို့ ပြန်လည်သတ်မှတ်ထားပါသည်။
• တတိယ အော်တိုကော်လံတွင် အစုအဝေး အကြောင်းအရာ မရှိပါ။

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

<div class="grid text-center" 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 ကိန်းရှင်များဖြင့် စိတ်ကြိုက်ပြင်ဆင်ပါ။

ဤ CSS ကိန်းရှင်များသည် ပုံသေတန်ဖိုးမရှိပါ။ ယင်းအစား၊ ၎င်းတို့သည် ဒေသန္တရ စံနမူနာကို ပံ့ပိုးမထားပါ ။ ဥပမာအားဖြင့်၊ မည်သည့်နေရာတွင်မှ မသတ်မှတ်ရသေးသောကြောင့် var(--bs-rows, 1)လျစ်လျူရှုထားသည့် ကျွန်ုပ်တို့၏ CSS Grid အတန်းများအတွက် အသုံးပြုပါသည်။ --bs-rowsအဲဒါပြီးတာနဲ့၊ .gridinstance ဟာ fallback value အစား အဲဒီတန်ဖိုးကို သုံးပါလိမ့်မယ် 1။

ဇယားကွက် အတန်းမရှိပါ။

.gridအတန်းအစား များကို အတိအကျမထည့်ဘဲ ၎င်းတို့သည် ဇယားကွက်များပါရှိသော အစိတ်အပိုင်းများဖြစ်သည် .g-col။

<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

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

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

<div class="grid text-center" 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 text-center" 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 text-center" 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 text-center" 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 ဖြင့် အသုံးပြုနိုင်ပါသည်။

<div class="grid text-center" 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 text-center" 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>