شرح صفوف ومحتوى الفقرة
تتجلى مرونة الفواصل البينية عند دمجها مع شبكات البطاقات .row-cols-* بصورة متجاوبة: فمن الممارسات الاحترافية تضييق الفواصل على شاشة الهاتف الصغيرة عبر .g-2 لاستغلال مساحة العرض الثمينة، ثم توسيعها تدريجياً على شاشات سطح المكتب الواسعة عبر .g-lg-4 لمنح البطاقات متنفساً بصرياً مريحاً.
<div class="container">
<div class="row row-cols-2 row-cols-lg-4 g-2 g-lg-4">
<div class="col"><div>Card 1</div></div>
<div class="col"><div>Card 2</div></div>
<div class="col"><div>Card 3</div></div>
<div class="col"><div>Card 4</div></div>
</div>
</div>يلخص الجدول التالي منظومة كلاسات الفواصل البينية في Bootstrap 5.3:
| فئة الكلاس | المتغير المتأثر | الوظيفة الدقيقة في التخطيط |
|---|---|---|
.gx-{0..5} | --bs-gutter-x | ضبط المسافة الأفقية الجانبية بين الأعمدة المتجاورة في السطر |
.gy-{0..5} | --bs-gutter-y | ضبط المسافة الرأسية الفاصلة بين أسطر الأعمدة الملتفة داخل الصف |
.g-{0..5} | --bs-gutter-x وy | توحيد قيمة الفاصل الأفقي والرأسي معاً من 0 حتى 3rem |
.g-0 | كلا المتغيرين = 0 | إزالة كافة الفواصل والهوامش السالبة لبناء أعمدة متلاصقة تماماً |
.g{x|y}-{bp}-{0..5} | متجاوب حسب الشاشة | تغيير حجم الفواصل البينية تلقائياً عند نقاط التوقف sm حتى xxl |
.overflow-hidden | الحاوية الأب | منع التمرير الأفقي الزائد عند استخدام فواصل عريضة مثل .gx-5 |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعرفت في هذا الدرس على آلية عمل الفواصل البينية عبر الحشو الجانبي والهوامش السالبة، وأتقنت تخصيص الفواصل الأفقية .gx-* والرأسية .gy-* والموحدة .g-*، وتصفيرها عبر .g-0، وتدريجها عبر الشاشات مع .row-cols-*. الخطوة التالية: انتقل الآن إلى درس «نظام الشبكة الحديثة CSS Grid وسلم z-index» لاستكشاف وضع الشبكة ثنائية الأبعاد بكلاسات .grid و.g-col-* و.g-start-*.