تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
in English

شبكة CSS

تعرف على كيفية تمكين واستخدام وتخصيص نظام التخطيط البديل الخاص بنا المبني على شبكة CSS مع أمثلة ومقتطفات التعليمات البرمجية.

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

تنبيه - نظام CSS Grid الخاص بنا هو نظام تجريبي ويمكن الاشتراك فيه اعتبارًا من الإصدار 5.1.0! لقد قمنا بتضمينه في 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الفئات. أضف فئات متجاوبة لتغيير التنسيق حسب حجم منفذ العرض.

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

متجاوب

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

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

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

.g-col-6
.g-col-6
<div class="grid">
  <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
<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 نموذجًا للشبكة من خلال الأنماط التي تطلب من المستعرضات "البدء من هذا العمود" و "الانتهاء عند هذا العمود". هذه الخصائص هي grid-column-startو grid-column-end. فصول البداية هي اختصار للأول. قم بإقرانها مع فئات الأعمدة لتغيير حجم الأعمدة ومواءمتها كيفما تشاء. تبدأ فئات البداية 1كما 0هي قيمة غير صالحة لهذه الخصائص.

.g-col-3 .g-start-2
.g-col-4 .g-start-6
<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) ، سيتم تغيير حجم كل عنصر في الشبكة تلقائيًا إلى عمود واحد.

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

يمكن خلط هذا السلوك مع فئات أعمدة الشبكة.

.g-col-6
1
1
1
1
1
1
<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 (الافتراضي لدينا).
  • لا يحتوي العمود التلقائي الثالث على محتوى متداخل.

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

أول عمود آلي
عمود تلقائي
عمود تلقائي
العمود التلقائي الثاني
6 من 12
4 من 12
2 من 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 المحلية.

عامل القيمة الاحتياطية وصف
--bs-rows 1 عدد الصفوف في قالب الشبكة الخاص بك
--bs-columns 12 عدد الأعمدة في قالب الشبكة الخاص بك
--bs-gap 1.5rem حجم الفجوة بين الأعمدة (الرأسية والأفقية)

هذه المتغيرات 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>

الأعمدة والفجوات

اضبط عدد الأعمدة والفجوة.

.g-col-2
.g-col-2
<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>
.g-col-6
.g-col-4
<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..gridrow-gapcolumn-gap

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

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

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

14 عمود
.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>