انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: شبكة CSS Grid في بوتستراب 5

Grid and g-col Classes بناء الشبكة بكلاسي grid وg-col

إتقان وضع CSS Grid الحديث وسلم طبقات z-index في بوتستراب 5: الفرق عن Flexbox، كلاسات grid وg-col وg-start، المتغيرات --bs-columns و--bs-gap، وترتيب الطبقات.
3 صفوف تعليمية
بوتستراب 5
1 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

لبناء شبكة CSS Grid من 12 عموداً، أنشئ حاوية <div class="grid"> وضع بداخلها عناصر تحمل .g-col-1 حتى .g-col-12 لتحديد عدد المسارات التي يمتد عبرها كل عنصر. لاحظ الفرق الجوهري عن Flexbox: إذا وضعت عنصراً ابناً داخل .grid بدون أي كلاس .g-col-*، فإنه يمتد افتراضياً ليملأ الـ 12 عموداً كاملة (وليس عموداً متقاسماً كما يفعل .col).

الصف 2 كود برمجي
HTML 
<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>
جرّب بنفسك
الصف 3 ملاحظة هامة

جميع فقرات هذا الدرس (شبكة CSS Grid في بوتستراب 5)