شبكة CSS

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

كيف تعمل

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

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

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

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

• يتم تعيين أحجام الأعمدة والتوثيق عبر متغيرات CSS. قم بتعيينها على الأصل .gridوقم بتخصيصها بالطريقة التي تريدها ، مضمنة أو في ورقة أنماط ، باستخدام --bs-columnsو --bs-gap.

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

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

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

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

• الفجوات تستبدل المزاريب. تحل الخاصية محل gapالأفقي paddingمن نظام الشبكة الافتراضي الخاص بنا ويعمل بشكل أشبه margin.

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

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

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

أمثلة

ثلاثة أعمدة

يمكن إنشاء ثلاثة أعمدة متساوية العرض عبر جميع منافذ العرض والأجهزة باستخدام .g-col-4الفئات. أضف فئات متجاوبة لتغيير التنسيق حسب حجم منفذ العرض.

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

متجاوب

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

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

يلف

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

أعمدة السيارات

في حالة عدم وجود فئات في عناصر الشبكة (العناصر الفرعية المباشرة لـ a .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>

التعشيش

على غرار نظام الشبكة الافتراضي الخاص بنا ، تتيح شبكة CSS الخاصة بنا تداخل سهل لـ .grids. ومع ذلك ، بخلاف الشبكة الافتراضية ، ترث هذه الشبكة التغييرات في الصفوف والأعمدة والفجوات. ضع في اعتبارك المثال أدناه:

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

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

<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 الخاصة بنا ، والتي تتجاهل --bs-rowsلأن ذلك لم يتم تعيينه في أي مكان بعد. بمجرد أن يتم ذلك ، .gridسيستخدم المثيل هذه القيمة بدلاً من القيمة الاحتياطية لـ 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. لاحظ أننا نستخدم s ، ولكن ويمكن تعديلها حسب الحاجة gap..gridrow-gapcolumn-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>

لهذا السبب ، يمكن أن يكون لديك قيم رأسية وأفقية مختلفة gap، والتي يمكن أن تأخذ قيمة واحدة (جميع الجوانب) أو زوجًا من القيم (رأسيًا وأفقيًا). يمكن تطبيق ذلك بنمط مضمّن لمتغير CSS الخاص gapبنا أو باستخدامه .--bs-gap

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

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