تصميم صفحة متجاوبة باستخدام CSS Flexbox وCSS Grid

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

الفكرة الأساسية

يتعامل Flexbox مع اتجاه رئيسي واتجاه عرضي، ويحدد justify-content توزيع العناصر على المحور الرئيسي، بينما يحدد align-items محاذاتها على المحور الآخر. أما Grid فيقسم الحاوية إلى مسارات، ويمكنه إنشاء أعمدة يتغير عددها بحسب المساحة. لا يعني استخدام Grid أن Flexbox غير مناسب؛ قد تستخدم Grid للتخطيط العام وFlexbox داخل بطاقة واحدة. ابدأ بهيكل HTML منطقي، ثم أضف CSS، لأن الترتيب البصري لا ينبغي أن يخفي معنى المحتوى عند تعطيل التنسيق.

مثال برمجي عملي

* {
  box-sizing: border-box;
}

.page {
  width: min(1100px, 100% - 2rem);
  margin-inline: auto;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.card {
  display: flex;
  flex-direction: column;
  min-height: 180px;
  padding: 1rem;
  border: 1px solid #d8d8d8;
  border-radius: 0.5rem;
}

.card__action {
  margin-top: auto;
}

@media (max-width: 480px) {
  .page {
    width: min(100% - 1rem, 1100px);
  }
}

شرح المثال

تضمن box-sizing أن padding والحدود يدخلان في حساب العرض. يحدد page عرضاً أقصى مع ترك مساحة جانبية، بينما تنشئ صيغة auto-fit أعمدة تتسع أو تنكمش وفق المساحة المتاحة. minmax يمنع البطاقة من أن تصبح ضيقة جداً. داخل البطاقة يستخدم Flexbox لدفع الزر إلى الأسفل عبر margin-top:auto، فيظهر التخطيط متساوياً رغم اختلاف طول النص. تقلل media query المسافة على الهاتف، لكنها ليست الحل الوحيد؛ المحتوى نفسه يجب أن يقبل الالتفاف.

ابدأ بصفحة بعرض الهاتف ثم وسعها تدريجياً، ولا تبدأ من تصميم مكتبي وتخفي العناصر في النهاية. اختبر النص الطويل والصور الكبيرة والأزرار التي تحتوي على كلمة عربية طويلة. استخدم وحدات نسبية مثل rem و%، وحدد max-width عند الحاجة. افحص الصفحة بأدوات المطور على أكثر من عرض، وتأكد من عدم ظهور تمرير أفقي. التصميم المتجاوب اختبار للمحتوى والتخطيط معاً.

طريقة العمل قبل كتابة الكود

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

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

اختبار المثال في حالات مختلفة

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

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

ملاحظات تتعلق بجودة الكود

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

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

متى تعرف أن الحل يحتاج إلى تطوير؟

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

إذا وجدت أن الخطأ يتكرر في أكثر من مكان، فابحث عن قاعدة مشتركة. وإذا أصبح التعديل في ملف صغير يؤثر في ملفات كثيرة، فراجع حدود المسؤوليات. لا توجد بنية واحدة صحيحة لكل مشروع، لكن توجد أسئلة تساعدك على اختيار بنية مناسبة: من يملك البيانات؟ من يغيرها؟ ماذا يحدث عند الفشل؟ وكيف يمكن اختبار الجزء من دون تشغيل النظام كله؟

أخطاء ينبغي تجنبها

من الأخطاء استخدام width ثابت لكل بطاقة، أو وضع height ثابت يقطع النص، أو إضافة overflow:hidden لإخفاء المشكلة. لا تضع عشرات media queries الصغيرة قبل فهم سبب الحاجة إليها. قد ينتج الفراغ غير المتوقع من margin collapse أو من ارتفاع ثابت، وليس من Grid نفسه. راجع ترتيب العناصر في HTML، لأن تغيير order بصرياً قد يربك مستخدم لوحة المفاتيح إذا اختلف عن ترتيب القراءة.

خطوة تالية مناسبة

أضف صورة بنسبة أبعاد مرنة، وحسّن التركيز والتنقل بلوحة المفاتيح. تعلم container queries عندما تحتاج المكونات إلى الاستجابة لعرض حاويتها لا عرض الشاشة. اكتب CSS على شكل طبقات بسيطة، واسمح للمحتوى بتحديد الارتفاع، فهذا يقلل عدد الإصلاحات عند تغير النصوص.

فكر في المحتوى قبل نقاط التوقف

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

اختبر التفاعل لا الشكل فقط

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

الخلاصة

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

تعديل المقال

إيفلون

تصميم صفحة متجاوبة باستخدام CSS Flexbox وCSS Grid