شبكة الـ (CSS)

يمثل نظام الشبكة الافتراضي في الـ Bootstrap تتويجاً لأكثر من عقد من تقنيات تخطيط الـ CSS، التي جربها واختبرها الملايين من الناس. ولكن، تم إنشاؤه أيضاً بدون العديد من ميزات وتقنيات الـ CSS الحديثة التي نراها في المتصفحات مثل الـ CSS Grid الجديدة.

كيف يعمل ؟

مع Bootstrap 5، أضفنا خيار تمكين نظام Grid منفصل مبني على CSS Grid، ولكن بلمسة خاصة من Bootstrap. لا تزال تحصل على الفئات (classes) التي يمكنك تطبيقها بسهولة لبناء تخطيطات متوافقة مع الشاشات (Responsive)، ولكن باستخدام نهج مختلف في البنية الداخلية.

• الـ CSS Grid يتطلب التفعيل الاختياري (opt-in). قم بتعطيل نظام الشبكة الافتراضي عن طريق تعيين $enable-grid-classes: false وتمكين الـ CSS Grid عن طريق تعيين $enable-cssgrid: true. ثم، قم بإعادة تجميع الـ Sass الخاص بك.

• استبدل حالات .row بـ .grid. تقوم الفئة .grid بتعيين display: grid وتنشئ grid-template تقوم ببنائه باستخدام الـ HTML الخاص بك.

• استبدل الفئات .col-* بالفئات .g-col-*. وذلك لأن أعمدة الـ CSS Grid الخاصة بنا تستخدم خاصية grid-column بدلاً من width.

• يتم تعيين أحجام الأعمدة والفراغات الفاصلة عبر متغيرات CSS. قم بتعيين هذه المتغيرات على العنصر الأب .grid وخصصها كما تريد، سواء بشكل مضمن (inline) أو في ورقة أنماط stylesheet، باستخدام --bs-columns و --bs-gap.

في المستقبل، من المرجح أن ينتقل Bootstrap إلى حل هجين حيث حققت خاصية gap دعماً كاملاً تقريباً من المتصفحات لـ flexbox.

الاختلافات الرئيسية

مقارنة بنظام الشبكة الافتراضي:

• أدوات الـ Flex لا تؤثر على أعمدة الـ CSS Grid بنفس الطريقة.

• تحل الفراغات (gaps) محل الفراغات الفاصلة (gutters). تحل خاصية gap محل الهامش الداخلي padding الأفقي من نظام الشبكة الافتراضي لدينا وتعمل بشكل أكبر مثل margin.

• بناءً على ذلك، وعلى عكس .row، فإن .grid ليس لها هوامش سلبية ولا يمكن استخدام أدوات الهوامش لتغيير الفراغات الفاصلة للشبكة. يتم تطبيق فراغات الشبكة أفقياً وعمودياً بشكل افتراضي. راجع قسم التخصيص لمزيد من التفاصيل.

• يجب النظر إلى الأنماط المضمنة والمخصصة كبدائل للفئات المعدلة (على سبيل المثال، style="--bs-columns: 3;" مقابل class="row-cols-3").

• يعمل التداخل بشكل مشابه، ولكنه قد يتطلب منك إعادة تعيين عدد الأعمدة في كل مثيل من .grid المتداخل. راجع قسم التداخل لمزيد من التفاصيل.

أمثلة

ثلاثة أعمدة

يمكن إنشاء ثلاثة أعمدة متساوية العرض عبر جميع أحجام الشاشات والأجهزة باستخدام الفئات (classes) .g-col-4. أضف الفئات المتوافقة مع الشاشات (Responsive) لتغيير التخطيط وفقاً لحجم منفذ العرض (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>

المتوافق مع الشاشات (Responsive)

استخدم الفئات المتوافقة مع الشاشات (Responsive) لتعديل التخطيط عبر منافذ العرض المختلفة. هنا نبدأ بعمودين في أضيق منافذ العرض، ثم ننتقل إلى ثلاثة أعمدة في منافذ العرض المتوسطة وما فوق.

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

قارن ذلك بتخطيط العمودين هذا في جميع منافذ العرض.

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

التفاف العناصر (Wrapping)

تلتف عناصر الشبكة تلقائياً إلى السطر التالي عندما لا يكون هناك المزيد من المساحة أفقياً. لاحظ أن 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>

فئات البداية (Starts)

تهدف فئات البداية (Start classes) إلى استبدال فئات الإزاحة (offset classes) في نظام الشبكة الافتراضي لدينا، ولكنها ليست متطابقة تماماً. تقوم الـ 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>

الأعمدة التلقائية

عندما لا تكون هناك فئات (classes) على عناصر الشبكة (الأبناء المباشرون لـ .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>

التداخل (Nesting)

على غرار نظام Grid الافتراضي لدينا، يتيح CSS Grid الخاص بنا إمكانية التداخل (nesting) بين عناصر .grid بسهولة. ومع ذلك، وعلى عكس النظام الافتراضي، فإن هذا الـ Grid يرث التغييرات التي تطرأ على الصفوف والأعمدة والفواصل (gaps). انظر إلى المثال التالي:

• نقوم بتجاوز العدد الافتراضي للأعمدة باستخدام متغير CSS محلي: --bs-columns: 3.
• في أول عمود تلقائي، يتم توريث عدد الأعمدة، ويشغل كل عمود ثلث العرض المتاح.
• في العمود التلقائي الثاني، أعدنا تعيين عدد الأعمدة في .grid المتداخل إلى 12 (وهو العدد الافتراضي لدينا).
• لا يحتوي العمود التلقائي الثالث على أي محتوى متداخل.

عملياً، يتيح هذا إنشاء تخطيطات أكثر تعقيداً وتخصيصاً مقارنةً بنظام Grid الافتراضي لدينا.

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

التخصيص

قم بتخصيص عدد الأعمدة، وعدد الصفوف، وعرض الفواصل (gaps) باستخدام متغيرات CSS المحلية.

هذه متغيرات CSS ليس لها قيمة افتراضية؛ بدلاً من ذلك، فإنها تطبق قيماً احتياطية يتم استخدامها حتى يتم توفير مثيل محلي. على سبيل المثال، نستخدم var(--bs-rows, 1) لصفوف الـ CSS Grid الخاصة بنا، والتي تتجاهل --bs-rows لأنها لم يتم تعيينها في أي مكان بعد. وبمجرد تعيينها، سيستخدم مثيل .grid هذه القيمة بدلاً من القيمة الاحتياطية 1.

لا توجد فئات شبكة (No grid classes)

تعتبر عناصر الأبناء المباشرون لـ .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>

الأعمدة والفواصل (gaps)

قم بتعديل عدد الأعمدة والفاصل (gap).

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

الفواصل (Gaps)

قم بتغيير الفراغات العمودية فقط عن طريق تعديل row-gap. لاحظ أننا نستخدم gap في عناصر .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>

Because of that, you can have different vertical and horizontal gaps, which can take a single value (all sides) or a pair of values (vertical and horizontal). This can be applied with an inline style for gap, or with our --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>

الـ (Sass)

أحد قيود الـ CSS Grid هو أن الفئات (classes) الافتراضية لدينا لا تزال يتم إنشاؤها بواسطة متغيري Sass وهما $grid-columns و $grid-gutter-width وهذا يحدد فعلياً عدد الفئات التي يتم إنشاؤها في CSS المجمّع لدينا.

لديك خياران هنا:

• تعديل متغيرات Sass الافتراضية تلك وإعادة تجميع CSS الخاص بك.
• استخدام أنماط مضمنة أو مخصصة لتعزيز الفئات المقدمة.

على سبيل المثال، يمكنك زيادة عدد الأعمدة وتغيير حجم الفراغ، ثم تحديد حجم "الأعمدة" الخاصة بك بمزيج من الأنماط المضمنة وفئات أعمدة 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>