Frontend Academy · درس

دمج Flexbox وGrid

استخدم Grid لتخطيط الصفحة العام وFlexbox لمحاذاة المكوّنات، مع معرفة الأداة الأنسب لكل حالة.

دمج Flexbox وGrid درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

أداتان متكاملتان

لا يُعد Flexbox وGrid متنافسين، بل صُمما للعمل معًا. النمط المعتاد هو استخدام CSS Grid لبنية الصفحة العامة، ثم استخدام Flexbox داخل كل منطقة من مناطق الشبكة لترتيب محتويات المكوّن.

تخطيط الصفحة باستخدام Grid والمكوّنات باستخدام Flex

حدّد الهيكل العام للصفحة باستخدام Grid. وداخل كل منطقة من مناطق الشبكة، استخدم Flexbox لترتيب المكوّن: روابط التنقل في صف، ومحتوى البطاقة في عمود.

/* Page skeleton */
body {
  display: grid;
  grid-template-areas: 'header' 'main' 'footer';
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* Component inside grid area */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

نمط شبكة البطاقات

النمط الكلاسيكي هو استخدام Grid لتخطيط البطاقات، وFlex لتخطيط محتويات كل بطاقة من الداخل. ويضمن ذلك محاذاة البطاقات على الشبكة، مع تكديس محتوياتها الداخلية (الصورة والعنوان والنص والتذييل) بشكل صحيح.

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
}
.card-body { flex: 1; }  /* push footer down */

نمط شريط التنقل

يجمع شريط التنقل الشائع بين الأداتين. يكون شريط التنقل نفسه حاوية Flexbox للشعار والروابط. وقد يكون قسم الروابط حاوية Flexbox أخرى. أما القائمة الضخمة فقد تستخدم Grid لتخطيط متعدد الأعمدة.

تخطيط 'Holy Grail'

يمكن تنفيذ تخطيط 'Holy Grail' (رأس الصفحة، ومنطقة وسطى من ثلاثة أعمدة، وتذييل) بسهولة باستخدام Grid اليوم. الأعمدة الثلاثة — الشريط الجانبي الأيسر والمحتوى الرئيسي والشريط الجانبي الأيمن — هي أعمدة Grid، بينما يستخدم المحتوى داخل كل منها Flexbox.

.page {
  display: grid;
  grid-template:
    'header header header' auto
    'left   main   right'  1fr
    'footer footer footer' auto
    / 200px 1fr 200px;
  min-height: 100vh;
}

توسيط أي شيء — Grid أو Flex

يمكن لكل من Grid وFlexbox توسيط المحتوى بشكل مثالي. في Grid: place-items: center (اختصار لـalign-items وjustify-items). وفي Flex: justify-content: center; align-items: center.

.center-grid {
  display: grid;
  place-items: center; /* centers both axes */
  min-height: 100vh;
}

.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

تخطيط الشريط الجانبي المتجاوب

على الأجهزة المحمولة: عمود واحد (التنقل في الأعلى). وعلى الأجهزة اللوحية والأكبر: شريط جانبي ومحتوى جنبًا إلى جنب. يجعل Grid هذا التخطيط تصريحيًا — إذ يمكنك تغيير template-areas داخل استعلام وسائط.

نمط الأيقونة والنص

هذا تخطيط مصغّر شائع جدًا: أيقونة بجوار نص. ويُعد Flexbox مثاليًا لذلك لأنه يتكون من صف واحد مع محاذاة.

.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.alert-icon { flex-shrink: 0; width: 20px; }
.alert-body { flex: 1; }

متى تختار إحداهما

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

لا تبالغ في هندسة الحل

أحيانًا يكون عنصر block بسيط مع max-width وmargin: auto أفضل من شبكة معقدة. لا يحتاج كل تخطيط إلى Grid. استخدم أبسط أداة تنجز المهمة.

تصحيح مشكلات التخطيط

في DevTools: انقر على شارات grid أو flex في لوحة Elements لإظهار خطوط الشبكة أو مخططات عناصر Flexbox فوق الصفحة. يجعل ذلك بنية التخطيط غير المرئية ظاهرة، وهو أمر بالغ الأهمية لتشخيص مشكلات عدم المحاذاة.

تحقق سريع

ما مجموعة أدوات التخطيط الأكثر شيوعًا لتخطيط الصفحة وتخطيط المكوّنات، على التوالي؟

مراجعة: الجمع بين Grid وFlex

يُعد Grid وFlexbox أداتين متكاملتين. استخدم Grid لبنية الصفحة الثنائية الأبعاد. واستخدم Flexbox للمحتويات الداخلية أحادية الاتجاه للمكوّنات. يؤدي استخدام place-items: center في شبكة إلى توسيط كل شيء. ويؤدي استخدام flex-direction: column مع flex: 1 في جسم البطاقة إلى دفع تذييلات البطاقات إلى الأسفل. صحّح الأخطاء باستخدام شارات التراكب في DevTools.

الأسئلة الشائعة

هل درس «دمج Flexbox وGrid» مجاني؟

نعم — نص درس «دمج Flexbox وGrid» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «دمج Flexbox وGrid»؟

استخدم Grid لتخطيط الصفحة العام وFlexbox لمحاذاة المكوّنات، مع معرفة الأداة الأنسب لكل حالة. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «دمج Flexbox وGrid»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

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

جميع الدروس في هذه الدورة

← العودة إلى Frontend Academy