تخطيطات CSS المتجاوبة: Flexbox وGrid والوحدات المرنة دون كسر الصفحة على الجوال

مقدمة

أكثر من نصف زيارات المواقع اليوم من الهواتف. التصميم المتجاوب يعني أن صفحة واحدة تتكيف مع أي عرض، دون تمرير أفقي، ودون نصوص صغيرة لا تُقرأ. أدوات CSS الحديثة تجعل ذلك أسهل بكثير مما كان.

أهداف التعلم

• البدء بالجوال أولاً (Mobile-first).
• اختيار Flexbox أو Grid حسب الحاجة.
• استخدام الوحدات المرنة وclamp() للخطوط والمسافات.
• استخدام الخصائص المنطقية لدعم العربية والإنجليزية معاً.

1. الأساس: viewport وbox-sizing

<meta name="viewport" content="width=device-width, initial-scale=1">

*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; }

بدون وسم viewport سيعرض الجوال الصفحة كأنها شاشة حاسوب مصغرة. وborder-box يجعل العرض يشمل الحشوة والحدود فلا يتجاوز العنصر حاويته.

2. Flexbox لصف أو عمود واحد

.toolbar {
  display: flex;
  flex-wrap: wrap;        /* ينزل لسطر جديد بدل الخروج من الشاشة */
  gap: 0.5rem;
  align-items: center;
}
.toolbar .search { flex: 1 1 14rem; } /* يتمدد، لكن لا يقل عن 14rem قبل الالتفاف */

Flexbox ممتاز لشريط أدوات أو قائمة أزرار أو بطاقة فيها صورة ونص.

3. Grid للتخطيطات ثنائية البعد

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

هذا السطر يصنع شبكة بطاقات تعرض عموداً واحداً على الجوال وعدة أعمدة على الشاشات الأكبر دون أي استعلام وسائط. min(100%, 16rem) يمنع الخروج عن الشاشة على العروض الصغيرة جداً (320 بكسل).

تخطيط صفحة بشريط جانبي:

.layout { display: grid; gap: 1.5rem; }
@media (min-width: 64rem) {
  .layout { grid-template-columns: 1fr 20rem; }
}
.layout > * { min-width: 0; } /* يمنع الكود الطويل من توسيع العمود */

min-width: 0 حل لمشكلة شائعة: عناصر Grid وFlex لا تنكمش أقل من محتواها افتراضياً، فسطر كود طويل يدفع الصفحة كلها للخارج.

4. أحجام مرنة بـ clamp

h1 { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem); }
.section { padding-block: clamp(1rem, 4vw, 3rem); }

clamp(أدنى، مفضل، أقصى) يكبر مع الشاشة لكن لا يقل ولا يزيد عن الحدود، فلا تحتاج عشرات الاستعلامات.

5. الخصائص المنطقية للعربية

بدل margin-left استخدم margin-inline-start، وبدل padding-right استخدم padding-inline-end. الخصائص المنطقية تنقلب تلقائياً مع dir="rtl"، فيعمل التصميم نفسه بالعربية والإنجليزية.

.badge { margin-inline-start: 0.5rem; border-inline-start: 3px solid var(--accent); }

6. استعلامات الوسائط بذكاء

ابدأ بأنماط الجوال، ثم أضف min-width للشاشات الأكبر فقط عندما يحتاج التصميم ذلك، لا لأحجام أجهزة محددة. واحترم تفضيلات المستخدم:

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

تمرين عملي

1. ابنِ صفحة فيها رأس، وشبكة بطاقات، وشريط جانبي.
2. افتح أدوات المطور ← وضع الجوال، وجرّب العروض 320 و375 و768 و1440.
3. تأكد أن document.documentElement.scrollWidth يساوي عرض النافذة (لا تمرير أفقي). اكتب في الـ Console: document.documentElement.scrollWidth <= innerWidth

أخطاء شائعة

• عروض ثابتة بالبكسل (width: 800px) على حاويات رئيسية.
• نسيان min-width: 0 مع Grid/Flex أمام الكود الطويل أو الروابط الطويلة.
• إخفاء محتوى مهم على الجوال بدل إعادة ترتيبه.
• خطوط أصغر من 16px في الحقول، فيكبّر Safari الصفحة عند التركيز.

الخلاصة

ابدأ بالجوال، استخدم Grid للتخطيط العام وFlexbox للمكونات، دع clamp وminmax يتكفلان بالأحجام، واعتمد الخصائص المنطقية لدعم الاتجاهين. واختبر دائماً على 320 بكسل.

مصادر مقترحة

• دليل CSS-Tricks الكامل لـ Flexbox ولـ Grid.
• توثيق MDN: «CSS logical properties and values».
• موقع Every Layout لأنماط تخطيط قوية دون استعلامات وسائط.