إتقان وضع CSS Grid الحديث وسلم طبقات z-index في بوتستراب 5: الفرق عن Flexbox، كلاسات grid وg-col وg-start، المتغيرات --bs-columns و--bs-gap، وترتيب الطبقات.
3 صفوف تعليمية
بوتستراب 5
1 مشاهدة
شرح صفوف ومحتوى الفقرة
الصف 1
شرح توضيحي
يتحكم عنصر .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 عملياً في المختبر الحي التالي:
الصف 2
معاينة حية
الصف 3
ملاحظة هامة
جميع فقرات هذا الدرس (شبكة CSS Grid في بوتستراب 5)
