شرح صفوف ومحتوى الفقرة
يجمع مهندسو الواجهات المحترفون بين التجاوب الذاتي التلقائي للشبكة واستعلامات @media الشرطية بتكامل ذكي: فنستخدم grid-template-areas مع نقاط التوقف لتشكيل الهيكل الخارجي العام للصفحة، ونضع بداخل منطقة <main> شبكة ذاتية عبر repeat(auto-fit, minmax(220px, 1fr)) لتوزيع البطاقات المتماثلة تلقائياً!
| هدف التخطيط | التقنية الموصى بها | سبب ملاءمتها الهندسية |
|---|---|---|
| الهيكل العام للصفحة (علوي، تنقل، رئيسي، جانبي، تذييل) | grid-template-areas مع @media | يعيد توزيع المناطق المختلفة بدقة مدروسة لكل فئة شاشة |
| معرض بطاقات متماثلة داخل المحتوى | repeat(auto-fit, minmax(220px, 1fr)) | يلف البطاقات المتساوية تلقائياً دون استعلامات إضافية |
| صف لوحة تحكم متفاوت النسب | repeat(12, 1fr) مع .col-md-6 | يحاذي الألواح المتفاوتة على مسارات عمودية منضبطة |
| واجهة ثنائية اللغة عربي وإنجليزي | شبكة مسماة مع سمة dir="rtl" | يعكس مواقع الأعمدة وعروضها تلقائياً بلا تكرار |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
في ملخص الدرس أتقنت تسمية مناطق الصفحة الدلالية عبر grid-area ورصّها للهاتف أولاً ثم إعادة تشكيل خريطتها عند نقطتي 768px و1024px مع الاستفادة من الانعكاس التلقائي للاتجاه وفحصها في أدوات المطور. وفي الخطوة التالية ننتقل إلى درس فيديو متجاوب مع جميع الأجهزة في لغة CSS لضبط تحجيم مشغلات الفيديو والإطارات المضمنة بحفظ تناسب أبعادها على كافة الشاشات.