مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
Check
in English

CSS گرڊ

سي ايس ايس گرڊ تي ٺهيل اسان جي متبادل ترتيب واري نظام کي ڪيئن فعال ڪرڻ، استعمال ڪرڻ ۽ ڪسٽمائيز ڪرڻ سکو مثالن ۽ ڪوڊ جي ٽڪڙن سان.

هن صفحي تي

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

اڳواٽ مٿي- اسان جو CSS گرڊ سسٽم تجرباتي آهي ۽ v5.1.0 جي مطابق آپٽ-ان! اسان ان کي اسان جي دستاويزن جي 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ڪلاس استعمال ڪندي ٺاهي سگھجن ٿيون. ويوپورٽ سائيز جي ترتيب سان ترتيب تبديل ڪرڻ لاءِ جوابي ڪلاس شامل ڪريو .

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

.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
html 
<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>

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

.g-col-6
.g-col-6
html 
<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گرڊ شين جي وچ ۾ افقي ۽ عمودي خالن تي لاڳو ٿئي ٿو.

.g-col-6
.g-col-6
.g-col-6
.g-col-6
html 
<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-column-start۽ grid-column-end. شروعاتي ڪلاس اڳوڻين لاءِ مختصر آهن. انهن کي ڪالمن جي ڪلاسن سان گڏ ٺاهيو ۽ توهان جي ڪالمن کي ترتيب ڏيو جڏهن توهان کي ضرورت هجي. شروعاتي ڪلاس شروع ٿين ٿا 1جيئن 0انھن ملڪيتن لاءِ غلط قدر آھي.

.g-col-3 .g-Start-2
.g-col-4 .g-Start-6
html 
<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)، هر گرڊ آئٽم کي خودڪار طريقي سان هڪ ڪالمن ۾ ماپ ڪيو ويندو.

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

اهو رويو گرڊ ڪالمن طبقن سان ملايو وڃي ٿو.

.g-col-6
1
1
1
1
1
1
html 
<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>

نستو

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

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

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

پهريون خودڪار ڪالم
خودڪار ڪالم
خودڪار ڪالم
ٻيو خودڪار ڪالم
6 مان 12
4 مان 12
2 مان 12
ٽيون خودڪار ڪالم
html 
<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 متغيرن سان ترتيب ڏيو.

متغير واپسي قدر وصف
--bs-rows 1 توهان جي گرڊ ٽيمپليٽ ۾ قطارن جو تعداد
--bs-columns 12 توهان جي گرڊ ٽيمپليٽ ۾ ڪالمن جو تعداد
--bs-gap 1.5rem ڪالمن جي وچ ۾ فرق جي ماپ (عمودي ۽ افقي)

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

ڪابه گرڊ ڪلاس

فوري طور تي ٻارن جا عنصر .gridگرڊ شيون آهن، تنهنڪري اهي واضح طور تي .g-colڪلاس شامل ڪرڻ کان سواء ٺهيل هوندا.

خودڪار ڪالم
خودڪار ڪالم
خودڪار ڪالم
html 
<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

ڪالمن ۽ خال

ڪالمن جو تعداد ۽ خال کي ترتيب ڏيو.

.g-col-2
.g-col-2
html 
<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>
.g-col-6
.g-col-4
html 
<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>

قطار شامل ڪرڻ

وڌيڪ قطارون شامل ڪرڻ ۽ ڪالمن جي جڳھ کي تبديل ڪرڻ:

خودڪار ڪالم
خودڪار ڪالم
خودڪار ڪالم
html 
<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. نوٽ ڪريو ته اسان s gapتي استعمال ڪريون ٿا .grid، پر row-gap۽ column-gapضرورت مطابق تبديل ڪري سگھجي ٿو.

.g-col-6
.g-col-6
.g-col-6
.g-col-6
html 
<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 هوندا، جيڪي هڪ واحد قدر (سڀني پاسن) يا قدرن جو هڪ جوڙو (عمودي ۽ افقي) وٺي سگهن ٿا. اهو لاڳو ٿي سگهي ٿو ان لائن انداز سان gap، يا اسان جي --bs-gapCSS متغير سان.

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

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

مثال طور، توهان ڪالمن جي ڳڻپ کي وڌائي سگهو ٿا ۽ فرق جي سائيز کي تبديل ڪري سگهو ٿا، ۽ پوءِ ان لائن اسلوب ۽ اڳواٽ بيان ڪيل CSS گرڊ ڪالمن ڪلاسن جي ميلاپ سان پنهنجي ”ڪالمن“ کي ماپ ڪري سگهو ٿا (مثال طور، .g-col-4).

14 ڪالمن
.g-col-4
html 
<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>