شرح صفوف ومحتوى الفقرة
تجمع الواجهات المتجاوبة الاحترافية بين Flexbox و CSS Grid بتكامل هندسي واضح؛ فتتولى الشبكة تقسيم الهيكل العام ثنائي الأبعاد، بينما يدير الصندوق المرن المكونات الداخلية التي يتبع حجمها محتواها:
| معيار المقارنة | التجاوب عبر Flexbox | التجاوب عبر CSS Grid |
|---|---|---|
| أبعاد التخطيط | أحادي البعد في صف أو عمود مع قابلية الالتفاف | ثنائي الأبعاد يضبط الصفوف والأعمدة معاً في آن واحد |
| العناصر المنفردة بآخر سطر | تتمدد تلقائياً لملء المساحة المتبقية في السطر | تلتزم بدقة تحت خطوط المسارات المحددة للأعمدة |
| فلسفة التحجيم | تبدأ من حجم المحتوى صعوداً لتوزيع السطر | تبدأ من تقسيم الحاوية نزولاً لوضع العناصر |
| المكونات المثالية | الشريط العلوي ومجموعات الأزرار والشارات والأقسام المقسومة | الهيكل العام للصفحة ومعارض البطاقات متطابقة العرض |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلّمت في هذا الدرس تبديل flex-direction عبر نقاط التوقف بنهج الهاتف أولاً، وبناء صفوف بطاقات ملتفة تلقائياً عبر flex-wrap: wrap و flex: 1 1 260px، وتصميم شريط علوي ثنائي اللغة ينعكس تلقائياً بين العربية والإنجليزية، ومنع فيضان النصوص الطويلة بالتصريح min-width: 0. في الخطوة التالية ننتقل إلى درس خاصية text-overflow في لغة CSS للتحكم الاحترافي في قص العناوين الطويلة وإظهار نقاط الاختصار القياسية.