شبكة مشاريع متجاوبة
CSS بلا تعقيد: التخطيطات مع Grid
كل معرض أعمال رائع يحتاج طريقة أنيقة لعرض مشاريعك. النمط الكلاسيكي هو شبكة من بطاقات المشاريع — صفوف وأعمدة مرتبة تعيد ترتيب نفسها تلقائياً مع تغيّر حجم الشاشة.
الطريقة القديمة كانت تعني صراعاً مع floats و clearfix. أما الطريقة الجديدة؟ تصف ما تريد — "ثلاثة أعمدة متساوية مع فراغ بينها" — وتتكفل أدوات grid في Tailwind بالباقي. لا حاجة لملف CSS.
في هذا الدرس ستبني شبكة مشاريع متجاوبة: عنوان، ثم حاوية grid تضم ثلاث بطاقات. في النهاية ستفهم grid و grid-cols-3 و gap — الأدوات الثلاث التي ستعود إليها مراراً وتكراراً.
التعليمات
أضف عنوان قسم h2 فوق الشبكة ليعرف الزوار ما يشاهدونه.
تلميح: استخدم: `<h2 class="text-3xl font-bold mb-8 text-center">مشاريع مختارة</h2>`
أين أكتب هذا؟
<!-- ابنِ شبكة مشاريعك هنا -->اكتبه في السطر 12 — أسفل هذا التعليق، بعد الكود الذي أضفته بالفعل.
أنشئ div حاوية شبكة باستخدام grid مع فراغ (gap) بين البطاقات.
اجعل الشبكة تعرض ثلاثة أعمدة متساوية على الشاشات المتوسطة فما فوق.
أضف بطاقة مشروع واحدة على الأقل داخل الشبكة باستخدام عنصر article مع عنوان ووصف.
الكود الخاص بك
صف ما تريد بناءه في هذه الخطوة وسأكتب الكود — ثم انقر «تطبيق» لإدراجه في محرّرك. هذه الخطوة: أضف عنوان قسم h2 فوق الشبكة ليعرف الزوار ما يشاهدونه.