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

Responsive g-col Tiers أعمدة CSS Grid المتجاوبة

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

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

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

يدعم CSS Grid في بوتستراب نفس نقاط التوقف الست القياسية عبر الكلاسات .g-col-sm-* و.g-col-md-* و.g-col-lg-* و.g-col-xl-* و.g-col-xxl-*، ما يجعل بناء لوحات المعلومات المتجاوبة نظيفاً ومقروءاً للغاية ودون حاجة لعناصر تغليف إضافية بداخل الأعمدة.

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

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