Tailwind CSS • المستوى الثاني • الدرس 2

الشبكات الشبكية المتقدمة (CSS Grid Layout & Gap)

أهداف الدرس

تقسيم الحاوية إلى أعمدة باستخدام grid grid-cols-*.
التحكم بالمسافات الفاصلة بين صفوف وأعمدة الشبكة بـ gap-*.
بناء شبكات متجاوبة متعددة المستويات بـ md:grid-cols-2 و lg:grid-cols-3.
دمج خلايا الشبكة بـ col-span-2 لإنشاء تخطيطات مركّبة.

1. قوة CSS Grid لبناء البطاقات والشبكات

تساعدك شبكات Grid على تنظيم المحتوى في صفوف وأعمدة متناسقة ثنائية الأبعاد، مما يجعلها الاختيار الأول لبناء شبكات الكروت ومنصات العرض التفاعلية.

html

<!-- شبكة 3 أعمدة أساسية -->
<div class="grid grid-cols-3 gap-4">
  <div>بطاقة 1</div>
  <div>بطاقة 2</div>
  <div>بطاقة 3</div>
</div>

<!-- شبكة متجاوبة متعددة المستويات -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  ...
</div>

<!-- بطاقة تمتد على عمودين -->
<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2">بطاقة عريضة</div>
  <div>بطاقة عادية</div>
</div>

2. مرجع Grid في Tailwind

الأعمدة (cols)

grid-cols-1 — عمود واحد
grid-cols-2 — عمودان
grid-cols-3 — 3 أعمدة
grid-cols-4 — 4 أعمدة
grid-cols-12 — 12 عموداً

الفجوات (Gap)

gap-2 — 8px
gap-4 — 16px
gap-6 — 24px
gap-x-4 gap-y-2 — مختلف

الامتداد (Col Span)

col-span-2 — يمتد لعمودين
col-span-3 — يمتد لـ 3
col-span-full — كل الأعمدة
row-span-2 — صفّان

الاستجابة

md:grid-cols-2 — عمودان على md+
lg:grid-cols-3 — 3 على lg+
sm:grid-cols-1 — الجوال

3. Grid أم Flex؟ متى تستخدم كل واحد؟

Flexbox — 1D

الأفضل عندما تُرتّب عناصر في اتجاه واحد: شريط تنقل، قائمة أزرار، مجموعة شارات.

Grid — 2D

الأفضل عندما تُنظّم في صفوف وأعمدة: شبكة بطاقات، معرض صور، لوحة تحكم.

التطبيق العملي المباشر

تحدي الدرس الثاني: بناء معرض بطاقات متجاوب

قم بالتعديل على الكود بداخل المحرر أدناه لتطبيق المتطلبات التالية:

غيّر الأعمدة إلى شبكة متجاوبة متعددة المستويات: grid-cols-1 md:grid-cols-2 lg:grid-cols-3.
أضف بطاقتين جديدتين (رقم 4 بـ text-amber-400 ورقم 5 بـ text-rose-400) بنفس التنسيق.
أضف بطاقة سادسة تمتد على عمودين بـ md:col-span-2.
غيّر لون بطاقة 6 إلى text-cyan-400 وأضف لها فقرة توضيحية.
احتفظ بكلاسات البطاقات الأصلية (bg-slate-800 p-6 rounded-2xl border border-slate-700 text-center).
احتفظ بالحاوية الرئيسية grid gap-6 p-4.

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق الانتقال للدرس الثالث