واجهات متجاوبة بـ CSS Grid وFlexbox

لا يوجد مقاس هاتف واحد أو شاشة مكتب واحدة. التصميم المتجاوب الجيد يسمح للمحتوى بإعادة ترتيب نفسه داخل أي مساحة معقولة. ابدأ بأضيق عرض، واجعل النص والأزرار قابلة للاستخدام، ثم أضف breakpoint عندما يصبح التخطيط مزدحمًا فعلًا، لا لأن إطار عمل أعطاك رقمًا مشهورًا.

حدد حاوية قصوى للمحتوى المقروء واترك هوامش مرنة. النص الطويل جدًا على سطر واحد يرهق العين، بينما الحاوية الصلبة قد تسبب تمريرًا أفقيًا. استخدم width: min() أو max-width مع padding متجاوب.

Flexbox ممتاز عندما يهمك توزيع عناصر على محور رئيسي واحد: شريط تنقل، صف أزرار، أو مجموعة بطاقات تلتف. يسمح gap بمسافة ثابتة دون حيل الهوامش، وتتحكم justify-content في المحور الرئيسي وalign-items في المحور المقاطع.

انتبه إلى min-width الافتراضي لعناصر flex؛ قد يمنع النص أو الكود من الانكماش ويصنع overflow. إضافة min-width: 0 إلى العنصر الذي يحتوي نصًا طويلًا حل صحيح عندما تريد السماح له بالانكماش والالتفاف.

Grid أنسب عندما تحتاج علاقة ثنائية الأبعاد أو أعمدة متسقة بين صفوف متعددة. في قائمة أدلة مثلًا يمكن تثبيت عمود للتصنيف وترك العنوان يتمدد ووضع الرابط في النهاية. على الهاتف تعود الشبكة إلى عمود واحد دون تغيير ترتيب DOM.

تعبير repeat(auto-fit, minmax(...)) يبني أعمدة بقدر ما تسمح المساحة ويعيد توزيعها تلقائيًا. استخدم حدًا أدنى أصغر من عرض هاتف ضيق حتى لا تخلق تمريرًا أفقيًا.

لا تختبر ثلاثة مقاسات محفوظة فقط. اسحب عرض المتصفح ببطء وابحث عن لحظة يصبح فيها النص مضغوطًا، أو يلتف الزر بشكل سيئ، أو يخرج الكود من الحاوية. اختبر تكبير النص إلى 200%، واتجاه RTL، وعنوانًا أطول من المتوقع.

استخدم الصور بأبعاد معروفة وobject-fit مناسبًا، وأضف overflow-wrap للنصوص التي قد تحتوي روابط طويلة. تجنب إخفاء المحتوى لمجرد أنه لا يناسب الهاتف؛ أعد ترتيب الأولوية وقدّم الوظيفة الأساسية أولًا.