سی ایس ایس گرڈ

بوٹسٹریپ کا ڈیفالٹ گرڈ سسٹم سی ایس ایس لے آؤٹ تکنیکوں کے ایک دہائی سے زیادہ کے اختتام کی نمائندگی کرتا ہے، جسے لاکھوں لوگوں نے آزمایا اور آزمایا۔ لیکن، یہ سی ایس ایس کی بہت سی جدید خصوصیات اور تکنیکوں کے بغیر بھی بنایا گیا تھا جو ہم نئے CSS گرڈ جیسے براؤزرز میں دیکھ رہے ہیں۔

یہ کیسے کام کرتا ہے

بوٹسٹریپ 5 کے ساتھ، ہم نے ایک علیحدہ گرڈ سسٹم کو فعال کرنے کا اختیار شامل کیا ہے جو CSS گرڈ پر بنایا گیا ہے، لیکن بوٹسٹریپ موڑ کے ساتھ۔ آپ کو اب بھی ایسی کلاسیں ملتی ہیں جنہیں آپ جوابدہ لے آؤٹ بنانے کے لیے درخواست دے سکتے ہیں، لیکن ہڈ کے نیچے ایک مختلف انداز کے ساتھ۔

• سی ایس ایس گرڈ آپٹ ان ہے۔ ترتیب دے کر ڈیفالٹ گرڈ سسٹم کو غیر فعال کریں اور سیٹنگ $enable-grid-classes: falseکے ذریعے CSS گرڈ کو فعال کریں $enable-cssgrid: true۔ پھر، اپنے Sass کو دوبارہ مرتب کریں۔

• کی مثالوں کو کے .rowساتھ بدل دیں .grid۔ .gridکلاس سیٹ display: gridاور تخلیق کرتی ہے جسے grid-templateآپ اپنے HTML کے ساتھ بناتے ہیں۔

• .col-*کلاسوں کو کلاسوں سے بدلیں .g-col-*۔ اس کی وجہ یہ ہے کہ ہمارے سی ایس ایس گرڈ کالم کے grid-columnبجائے پراپرٹی استعمال کرتے ہیں width۔

• کالم اور گٹر کے سائز CSS متغیرات کے ذریعے سیٹ کیے گئے ہیں۔ ان کو والدین پر سیٹ کریں .gridاور اپنی مرضی کے مطابق بنائیں، ان لائن یا اسٹائل شیٹ میں، --bs-columnsاور کے ساتھ --bs-gap۔

مستقبل میں، بوٹسٹریپ ممکنہ طور پر ہائبرڈ حل کی طرف منتقل ہو جائے گا کیونکہ gapپراپرٹی نے فلیکس باکس کے لیے تقریباً مکمل براؤزر سپورٹ حاصل کر لیا ہے۔

کلیدی اختلافات

پہلے سے طے شدہ گرڈ سسٹم کے مقابلے:

• فلیکس یوٹیلیٹیز سی ایس ایس گرڈ کالمز کو اسی طرح متاثر نہیں کرتی ہیں۔

• گٹروں کی جگہ گیپس۔ پراپرٹی ہمارے ڈیفالٹ گرڈ سسٹم سے gapافقی کی جگہ لے لیتی ہے اور اس طرح کام کرتی ہے۔paddingmargin

• اس طرح، s کے برعکس .row، .grids کا کوئی منفی مارجن نہیں ہے اور مارجن کی افادیت کو گرڈ گٹر کو تبدیل کرنے کے لیے استعمال نہیں کیا جا سکتا۔ گرڈ گیپس افقی اور عمودی طور پر بطور ڈیفالٹ لاگو ہوتے ہیں۔ مزید تفصیلات کے لیے حسب ضرورت سیکشن دیکھیں ۔

• style="--bs-columns: 3;"ان لائن اور کسٹم اسٹائلز کو موڈیفائر کلاسز (مثلاً، بمقابلہ class="row-cols-3") کے متبادل کے طور پر دیکھا جانا چاہیے ۔

• نیسٹنگ اسی طرح کام کرتی ہے، لیکن آپ کو اپنے کالم کی گنتی کو نیسٹڈ کی ہر مثال پر دوبارہ ترتیب دینے کی ضرورت پڑ سکتی ہے .grid۔ تفصیلات کے لیے نیسٹنگ سیکشن دیکھیں ۔

مثالیں

تین کالم

تمام ویو پورٹس اور آلات پر تین مساوی چوڑائی والے کالم .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>

جوابدہ

ویو پورٹس میں اپنی ترتیب کو ایڈجسٹ کرنے کے لیے ریسپانسیو کلاسز کا استعمال کریں۔ یہاں ہم تنگ ترین ویو پورٹس پر دو کالموں سے شروع کرتے ہیں، اور پھر درمیانے ویو پورٹ اور اس سے اوپر کے تین کالموں تک بڑھتے ہیں۔

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

شروع ہوتا ہے۔

اسٹارٹ کلاسز کا مقصد ہماری ڈیفالٹ گرڈ کی آفسیٹ کلاسز کو تبدیل کرنا ہے، لیکن وہ مکمل طور پر ایک جیسی نہیں ہیں۔ سی ایس ایس گرڈ اسٹائلز کے ذریعے ایک گرڈ ٹیمپلیٹ بناتا ہے جو براؤزر کو "اس کالم سے شروع" اور "اس کالم پر ختم" کرنے کو کہتے ہیں۔ وہ خصوصیات ہیں 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>

خودکار کالم

جب گرڈ آئٹمز (a کے فوری بچے) پر کوئی کلاسز نہ ہوں تو .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>

گھونسلہ

ہمارے ڈیفالٹ گرڈ سسٹم کی طرح، ہمارا CSS گرڈ .grids کی آسانی سے گھونسلے کی اجازت دیتا ہے۔ تاہم، ڈیفالٹ کے برعکس، اس گرڈ کو قطاروں، کالموں اور خلا میں تبدیلیاں ملتی ہیں۔ ذیل کی مثال پر غور کریں:

• ہم مقامی CSS متغیر کے ساتھ کالموں کی ڈیفالٹ تعداد کو اوور رائیڈ کرتے ہیں: --bs-columns: 3۔
• پہلے آٹو کالم میں، کالم کی گنتی وراثت میں ملتی ہے اور ہر کالم دستیاب چوڑائی کا ایک تہائی ہوتا ہے۔
• دوسرے آٹو کالم میں، ہم نے نیسٹڈ پر کالم کی گنتی .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 متغیرات کے ساتھ کالموں کی تعداد، قطاروں کی تعداد، اور خلا کی چوڑائی کو حسب ضرورت بنائیں۔

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