CSS گرڊ

بوٽ اسٽريپ جو ڊفالٽ گرڊ سسٽم هڪ ڏهاڪي کان مٿي CSS ترتيب واري ٽيڪنڪ جي خاتمي جي نمائندگي ڪري ٿو، لکين ماڻهن جي ڪوشش ۽ آزمائش. پر، اهو پڻ ڪيترن ئي جديد CSS خاصيتن ۽ ٽيڪنالاجين کان سواءِ ٺاهيو ويو آهي جيڪي اسان برائوزرن ۾ ڏسي رهيا آهيون جهڙوڪ نئين CSS گرڊ.

اهو ڪيئن ڪم ڪري ٿو

Bootstrap 5 سان، اسان هڪ الڳ گرڊ سسٽم کي فعال ڪرڻ جو اختيار شامل ڪيو آهي جيڪو CSS گرڊ تي ٺهيل آهي، پر بوٽ اسٽريپ موڙ سان. توهان اڃا تائين ڪلاس حاصل ڪري سگهو ٿا ته توهان جوابي ترتيب ٺاهڻ جي خواهش تي لاڳو ڪري سگهو ٿا، پر هود جي هيٺان مختلف طريقي سان.

• CSS گرڊ آپٽ ان آهي. سيٽنگ ذريعي ڊفالٽ گرڊ سسٽم کي غير $enable-grid-classes: falseفعال ڪريو ۽ سيٽنگ ذريعي CSS گرڊ کي فعال ڪريو $enable-cssgrid: true. پوء، پنھنجي ساس کي ٻيهر ٺاھيو.

• .rowسان جي مثالن کي تبديل ڪريو .grid. .gridڪلاس سيٽ display: grid۽ ٺاهي ٿو جيڪو grid-templateتوهان پنهنجي HTML سان ٺاهيندا آهيو.

• .col-*ڪلاسن سان ڪلاسن کي تبديل ڪريو .g-col-*. اهو ئي سبب آهي جو اسان جي CSS گرڊ ڪالمن grid-columnبدران ملڪيت استعمال ڪندا آهن width.

• ڪالمن ۽ گٽر سائيز سي ايس ايس متغير ذريعي مقرر ڪيا ويا آهن. انهن کي والدين تي سيٽ ڪريو .grid۽ ڪسٽمائيز ڪريو جيئن توهان چاهيو، ان لائن يا اسٽائل شيٽ ۾، سان --bs-columns۽ --bs-gap.

مستقبل ۾، بوٽ اسٽراپ ممڪن طور تي هڪ هائبرڊ حل ڏانهن شفٽ ٿيندو جيئن gapملڪيت حاصل ڪري چڪو آهي تقريبن مڪمل برائوزر سپورٽ flexbox لاءِ.

اهم اختلاف

ڊفالٽ گرڊ سسٽم جي مقابلي ۾:

• فليڪس يوٽيلٽيز سي ايس ايس گرڊ ڪالمن کي ساڳئي طريقي سان متاثر نه ڪندا آهن.

• گٽرن جي جاءِ خال. ملڪيت اسان جي ڊفالٽ گرڊ سسٽم مان gapافقي کي تبديل ڪري ٿي ۽ وڌيڪ ڪم ڪري ٿي .paddingmargin

• جيئن ته، s جي برعڪس .row، .grids وٽ ڪوبه منفي مارجن نه آهي ۽ گرڊ گٽر کي تبديل ڪرڻ لاءِ مارجن يوٽيلٽيز استعمال نٿا ڪري سگهجن. گرڊ خال ڊفالٽ طور افقي ۽ عمودي طور تي لاڳو ڪيا ويا آهن. وڌيڪ تفصيل لاءِ حسب ضرورت سيڪشن ڏسو .

• ان لائن ۽ ڪسٽم اسلوب کي تبديل ڪندڙ طبقن جي بدلي طور ڏٺو وڃي (مثال طور، style="--bs-columns: 3;"بمقابله class="row-cols-3").

• Nesting ساڳي طرح ڪم ڪري ٿو، پر ٿي سگھي ٿو ته توھان کي ضرورت پوي ته توھان پنھنجي ڪالمن جي ڳڻپ کي nested جي ھر ھڪڙي مثال تي ري سيٽ ڪريو .grid. تفصيل لاءِ nesting سيڪشن ڏسو .

مثال

ٽي ڪالمن

ٽي برابر-چوڪر ڪالمن سڀني ڏيک بندرگاهن ۽ ڊوائيسز تي .g-col-4ڪلاس استعمال ڪندي ٺاهي سگھجن ٿيون. ويوپورٽ سائيز جي ترتيب سان ترتيب تبديل ڪرڻ لاءِ جوابي ڪلاس شامل ڪريو .

<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 ۾. هتي اسان ٻن ڪالمن سان شروع ڪريون ٿا تنگ ترين وييوپورٽس تي، ۽ پوءِ وڌون ٿا ٽن ڪالمنن تي وچولي ڏيک واري بندرگاهن تي ۽ مٿي.

<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>

ان جو مقابلو ڪريو ھن ٻن ڪالمن جي ترتيب سان سڀني ويوپورٽس تي.

<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-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>

نستو

اسان جي ڊفالٽ گرڊ سسٽم وانگر، اسان جي سي ايس ايس گرڊ جي اجازت ڏئي ٿي آساني سان .grids. بهرحال، ڊفالٽ جي برعڪس، هي گرڊ قطارن، ڪالمن ۽ خالن ۾ تبديلين جو وارث آهي. هيٺ ڏنل مثال تي غور ڪريو:

• اسان ڪالمن جي ڊفالٽ نمبر کي مقامي CSS متغير سان ختم ڪريون ٿا: --bs-columns: 3.
• پهرين آٽو ڪالمن ۾، ڪالمن جي ڳڻپ ورثي ۾ ملي ٿي ۽ هر ڪالم موجود ويڪر جو ٽيون حصو آهي.
• .gridٻئي آٽو ڪالمن ۾، اسان 12 (اسان جي ڊفالٽ) تي nested تي ڪالمن جي ڳڻپ کي ري سيٽ ڪيو آهي.
• ٽئين آٽو ڪالمن ۾ ڪو به داخل ٿيل مواد ناهي.

عملي طور تي هي اسان جي ڊفالٽ گرڊ سسٽم جي مقابلي ۾ وڌيڪ پيچيده ۽ ڪسٽم ترتيب ڏيڻ جي اجازت ڏئي ٿو.

<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 متغيرن سان ترتيب ڏيو.

هنن CSS متغيرن جو ڪو به ڊفالٽ قدر ناهي. ان جي بدران، اهي فال بڪ قدر لاڳو ڪندا آهن جيڪي استعمال ڪيا ويندا آهن جيستائين مقامي مثال مهيا نه ڪيو وڃي. مثال طور، اسان var(--bs-rows, 1)اسان جي CSS گرڊ قطارن لاءِ استعمال ڪريون ٿا، جيڪي نظر انداز --bs-rowsڪن ٿيون ڇاڪاڻ ته اڃا تائين ڪٿي به سيٽ نه ڪئي وئي آهي. هڪ دفعو اهو آهي، .gridمثال طور استعمال ڪندو قيمت جي بدران قيمت جي قيمت 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. نوٽ ڪريو ته اسان s gapتي استعمال ڪريون ٿا .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>

انهي جي ڪري، توهان وٽ مختلف عمودي ۽ افقي gaps هوندا، جيڪي هڪ واحد قدر (سڀني پاسن) يا قدرن جو هڪ جوڙو (عمودي ۽ افقي) وٺي سگهن ٿا. اهو لاڳو ٿي سگهي ٿو ان لائن انداز سان gap، يا اسان جي --bs-gapCSS متغير سان.

<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 گرڊ جي هڪ حد اها آهي ته اسان جا ڊفالٽ ڪلاس اڃا تائين ٻن Sass متغيرن، $grid-columns۽ $grid-gutter-width. اهو مؤثر طور تي اسان جي مرتب ڪيل CSS ۾ تيار ڪيل ڪلاسن جو تعداد اڳواٽ طئي ڪري ٿو. توهان وٽ هتي ٻه اختيار آهن:

• انھن ڊفالٽ Sass متغيرن کي تبديل ڪريو ۽ پنھنجي CSS کي ٻيهر ٺاھيو.
• مهيا ڪيل طبقن کي وڌائڻ لاءِ ان لائن يا ڪسٽم اسلوب استعمال ڪريو.

مثال طور، توهان ڪالمن جي ڳڻپ کي وڌائي سگهو ٿا ۽ فرق جي سائيز کي تبديل ڪري سگهو ٿا، ۽ پوءِ ان لائن اسلوب ۽ اڳواٽ بيان ڪيل CSS گرڊ ڪالمن ڪلاسن جي ميلاپ سان پنهنجي ”ڪالمن“ کي ماپ ڪري سگهو ٿا (مثال طور، .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>