في هذا الدرس 6تصفّح المواضيع
إلى جانب نظام الشبكة الكلاسيكي المبني على Flexbox (.row و.col-*)، قدّم Bootstrap 5.1+ وضعاً اختيارياً حديثاً مبنياً بالكامل على تقنية CSS Grid الأصيلة ثنائية الأبعاد. يُفعَّل هذا الوضع عند بناء الملفات المصدرية بضبط المتغير $enable-cssgrid: true في Sass، ويستبدل الصفوف والأعمدة التقليدية بكلاسي .grid و.g-col-*.
أبرز ما يميز وضع CSS Grid هو اعتماده المباشر على خاصية gap الحقيقية في المتصفح بدلاً من الحشو الداخلي والهوامش السالبة، ما يتيح لك تلوين عناصر الأعمدة مباشرة دون اختفاء المسافات الفاصلة، فضلاً عن سهولة تغيير عدد أعمدة الشبكة لحظياً عبر متغيرات CSS.
لبناء شبكة CSS Grid من 12 عموداً، أنشئ حاوية <div class="grid"> وضع بداخلها عناصر تحمل .g-col-1 حتى .g-col-12 لتحديد عدد المسارات التي يمتد عبرها كل عنصر. لاحظ الفرق الجوهري عن Flexbox: إذا وضعت عنصراً ابناً داخل .grid بدون أي كلاس .g-col-*، فإنه يمتد افتراضياً ليملأ الـ 12 عموداً كاملة (وليس عموداً متقاسماً كما يفعل .col).
<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-4">.g-col-4</div>
<div class="g-col-8">.g-col-8</div>
</div>يدعم CSS Grid في بوتستراب نفس نقاط التوقف الست القياسية عبر الكلاسات .g-col-sm-* و.g-col-md-* و.g-col-lg-* و.g-col-xl-* و.g-col-xxl-*، ما يجعل بناء لوحات المعلومات المتجاوبة نظيفاً ومقروءاً للغاية ودون حاجة لعناصر تغليف إضافية بداخل الأعمدة.
<div class="grid">
<div class="g-col-sm-6 g-col-lg-4">Track 1</div>
<div class="g-col-sm-6 g-col-lg-4">Track 2</div>
<div class="g-col-sm-12 g-col-lg-4">Track 3</div>
</div>لتثبيت بداية العنصر عند خط مسار محدد بدلاً من استخدام الهوامش كما في .offset-*، استخدم كلاسات .g-start-1 حتى .g-start-11 (ونسخها المتجاوبة مثل .g-start-md-3). انتبه جيداً إلى أن ترقيم المسارات في CSS Grid يبدأ من الرقم 1؛ أي أن .g-start-3 يضع بداية العنصر عند العمود الثالث مباشرة (تاركاً عمودين فارغين قبله).
<div class="grid">
<div class="g-col-4 g-start-2">Starts at 2 (spans 4)</div>
<div class="g-col-4 g-start-8">Starts at 8 (spans 4)</div>
</div>يتحكم عنصر .grid في أبعاده عبر ثلاثة متغيرات CSS محلية مرنة للغاية: --bs-columns (افتراضياً 12)، و--bs-gap (افتراضياً 1.5rem)، و--bs-rows (افتراضياً 1). يمكنك مثلاً إنشاء شبكة من 3 أعمدة متساوية تلقائياً بكتابة style="--bs-columns: 3; --bs-gap: 1rem;" مع عناصر .g-col-1 أو grid-auto-columns بمرونة فائقة.
اختبر جميع قدرات CSS Grid عملياً في المختبر الحي التالي:
يُختتم محور التخطيط المعماري في توثيق Bootstrap 5 الرسمي بفهم سلم طبقات التراكب z-index؛ إذ يعتمد الإطار مقياساً رقمياً محجوزاً يبدأ من 1000 حتى 1090 لضمان عدم اختفاء التلميحات خلف النوافذ المنبثقة أو تغطية القوائم المنسدلة للشريط العلوي الثابت:
- القوائم المنسدلة Dropdown: الطبقة
1000، والعناصر اللاصقة Sticky:1020، والثابتة Fixed:1030. - اللوحة الجانبية Offcanvas وخلفيتها:
1040و1045، والنافذة المنبثقة Modal وخلفيتها:1050و1055. - البطاقات التوضيحية Popover:
1070، والتلميحات Tooltip:1080، وإشعارات Toast في القمة:1090.
أما داخل المكوّن الواحد (مثل إبراز حقل نشط أو زر محدد)، فيستخدم بوتستراب قيماً منخفضة جداً (1 إلى 3) لئلا تتداخل أبداً مع طبقات التخطيط العليا.
<div class="grid"
style="--bs-columns: 4; --bs-gap: 0.75rem;">
<div class="g-col-1">1000 Dropdown</div>
<div class="g-col-1">1030 Fixed</div>
<div class="g-col-1">1055 Modal</div>
<div class="g-col-1">1090 Toast</div>
</div>يلخص الجدول المرجعي التالي كافة أدوات نظام CSS Grid وسلم طبقات التخطيط في Bootstrap 5.3:
| الأداة أو المتغير | النطاق والقيمة الافتراضية | الوظيفة المعمارية في التخطيط |
|---|---|---|
.grid | يتطلب $enable-cssgrid: true | إنشاء حاوية CSS Grid من 12 مساراً بفجوة حقيقية بدون هوامش سالبة |
.g-col-{bp}-{1..12} | الافتراضي بدون كلاس = 12 | تحديد عدد المسارات التي يمتد عبرها العنصر عند نقطة التوقف المحددة |
.g-start-{bp}-{1..11} | ترقيم يبدأ من 1 | تثبيت بداية العنصر عند خط مسار عمودي صريح داخل الشبكة |
--bs-columns | الافتراضي: 12 | تخصيص إجمالي عدد أعمدة الشبكة محلياً لأي حاوية .grid |
--bs-gap | الافتراضي: 1.5rem | تعديل المسافة الفاصلة الأفقية والرأسية معاً عبر خاصية gap |
سلم z-index | من 1000 إلى 1090 | تنظيم تراكب القوائم والأشرطة الثابتة والنوافذ المنبثقة والتلميحات والإشعارات |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس ختام وحدة التخطيط في بوتستراب 5 بالتعرف على نظام CSS Grid الاختياري وكلاسات .grid و.g-col-* و.g-start-* ومتغيرات --bs-columns و--bs-gap وسلم طبقات z-index القياسي من 1000 إلى 1090. الخطوة التالية: انتقل الآن إلى الوحدة الثالثة مع درس «تنسيق النصوص والعناوين Typography» لإتقان العناوين القياسية والبارزة والفقرات الاستهلالية والاقتباسات.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Bootstrap CSS Grid شبكة CSS Grid في بوتستراب
- وضع تخطيط ثنائي الأبعاد اختياري في بوتستراب يعتمد على .grid و.g-col-* وخاصية الفجوة الحقيقية gap.
- للمراجعة
- 02 Grid Track Span (.g-col-*) امتداد مسار الشبكة
- كلاسات تحدد عدد المسارات التي يشغلها العنصر داخل .grid، وتمتد افتراضياً لـ 12 مساراً عند عدم تحديدها.
- للمراجعة
- 03 Grid Track Start (.g-start-*) خط بداية المسار
- كلاسات ترقيم تبدأ من 1 لتثبيت بداية العنصر عند خط عمودي محدد داخل الشبكة.
- للمراجعة
- 04 Component Z-Index Scale سلم طبقات التراكب القياسي
- التدرج الرقمي المحجوز من 1000 إلى 1090 لضمان ظهور النوافذ المنبثقة والتلميحات والإشعارات بترتيب صحيح.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 SCSS SCSS
- Sassy Cascading Style Sheets
- صياغة Sass المتقدمة للأنماط — تتيح تفعيل وتوليد كلاسات CSS Grid في بوتستراب عند ضبط المتغير $enable-cssgrid: true.
- للمراجعة
- 02 CSS CSS
- Cascading Style Sheets
- أوراق الأنماط المتتالية — توفر خصائص الشبكة ثنائية الأبعاد والفجوات والمتغيرات المخصصة محلياً لكل حاوية.
- للمراجعة
- 03 DOM DOM
- Document Object Model
- نموذج كائن المستند — تبقى شجرته أخف وأنقى في وضع CSS Grid لإمكانية تنسيق خلايا .g-col-* مباشرة دون أغلفة إضافية.
- للمراجعة
- 04 UI UI
- User Interface
- واجهة المستخدم — تحمي المكونات العائمة من التداخل العشوائي بفضل عقد الطبقات القياسي بين 1000 و1090.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ حاوية <div class="grid"> بداخلها ثلاثة عناصر تحمل الكلاسات g-col-sm-6 g-col-lg-4 لتأخذ العرض الكامل على الهاتف وعنصرين عند sm وثلاثة عند lg.
-
أنشئ شبكة .grid مخصصة بالسمة style="--bs-columns: 3; --bs-gap: 1rem;" مع ثلاثة عناصر .g-col-1، وشبكة ثانية قياسية يتوسطها عنصر .g-col-6 عبر .g-start-4.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.