CSS Flexbox مقابل Grid: متى تستخدم كل تخطيط

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

ما هو CSS Flexbox؟

تخطيط الصندوق المرن في CSS، المعروف باسم Flexbox، هو نموذج تخطيط أحادي البعد. يتفوق في توزيع المساحة على طول محور واحد (صف أفقي أو عمود رأسي). يجعل Flexbox العناصر داخل الحاوية قادرة على التمدد والنمو والانكماش والمحاذاة الذاتية بناءً على المساحة المتاحة.

صُمم Flexbox لحل مشكلات التخطيط الشائعة التي كانت صعبة السمعة في CSS التقليدي: توسيط العناصر رأسيًا، وتوزيع المساحة بالتساوي بين العناصر الشقيقة، وإعادة ترتيب المحتوى دون تغيير HTML. قبل Flexbox، اعتمد المطورون على العوامات وحيل inline-block وتخطيطات الجداول لتحقيق هذه التأثيرات.

مفاهيم Flexbox الأساسية

• حاوية Flex: العنصر الأب المطبق عليه display: flex.
• عناصر Flex: الأبناء المباشرون لحاوية Flex.
• المحور الرئيسي: الاتجاه الأساسي للتخطيط (أفقي افتراضيًا، يتحكم به flex-direction).
• المحور المتقاطع: الاتجاه العمودي على المحور الرئيسي.
• النمو/الانكماش/الأساس في Flex: خصائص تتحكم في كيفية تمدد العناصر وانكماشها لملء المساحة المتاحة.

مثال Flexbox: شريط التنقل

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

.navbar__logo {
  flex-shrink: 0;
}

.navbar__links {
  display: flex;
  gap: 16px;
  list-style: none;
}

يستخدم شريط التنقل هذا Flexbox مع justify-content: space-between لدفع الشعار إلى اليسار والروابط إلى اليمين. تتم محاذاة العناصر رأسيًا باستخدام align-items: center. هذا تخطيط كلاسيكي أحادي البعد حيث يكون Flexbox هو الخيار الطبيعي.

ما هو CSS Grid؟

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

صُمم Grid لتخطيطات مستوى الصفحة وهياكل المكونات المعقدة حيث تحتاج إلى التحكم في كلا البعدين. يقدم مفاهيم مثل مناطق الشبكة المسماة و auto-fill و auto-fit وأحجام الصفوف والأعمدة الصريحة التي تجعل التخطيطات المستحيلة سابقًا مباشرة.

مفاهيم Grid الأساسية

• حاوية Grid: العنصر الأب المطبق عليه display: grid.
• عناصر Grid: الأبناء المباشرون لحاوية Grid.
• مسارات Grid: الصفوف والأعمدة المعرّفة بواسطة grid-template-rows و grid-template-columns.
• خطوط Grid: خطوط غير مرئية تشكل حدود المسارات، تُستخدم للوضع.
• مناطق Grid: أقسام مسماة من الشبكة يمكن تخصيص العناصر لها.
• الفجوة: التباعد بين مسارات الشبكة (الصفوف والأعمدة).

مثال Grid: تخطيط الصفحة

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 64px 1fr 48px;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  min-height: 100vh;
}

.page__header  { grid-area: header; }
.page__sidebar { grid-area: sidebar; }
.page__content { grid-area: content; }
.page__footer  { grid-area: footer; }

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

Flexbox مقابل Grid: مقارنة جنبًا إلى جنب

متى تستخدم Flexbox

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

1. أشرطة التنقل والقوائم

التنقل هو في الأساس صف (أو عمود) من العناصر. يوزع Flexbox المساحة بين العناصر، ويتعامل مع الفائض بأناقة، ويجعل المحاذاة الرأسية للعناصر بسيطة. تستبدل خاصية gap التباعد القديم القائم على margin بين عناصر القائمة.

2. توسيط المحتوى

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

حل التوسيط الثلاثي هذا هو أحد أكثر أنماط Flexbox المحبوبة. قبل Flexbox، كان التوسيط الرأسي يتطلب حيلًا تشمل table-cell أو التموضع المطلق مع transform أو حيل line-height. Flexbox يجعله بلا مجهود.

3. محاذاة محتوى البطاقات

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

.card {
  display: flex;
  flex-direction: column;
}

.card__content {
  flex: 1;
}

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

4. تخطيط صفوف النماذج

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

5. كائن الوسائط

نمط كائن الوسائط الكلاسيكي (صورة على اليسار، نص على اليمين) هو توافق طبيعي مع Flexbox. تحتفظ الصورة بعرضها الطبيعي بينما يملأ النص المساحة المتبقية.

متى تستخدم CSS Grid

عندما يحتاج تخطيطك إلى التحكم في كل من الصفوف والأعمدة، أو يحتاج إلى وضع دقيق للعناصر في هيكل محدد، فإن Grid هو الخيار الصحيح.

1. تخطيط الصفحة الكاملة

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

.layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "content"
    "sidebar"
    "footer";
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 1fr 300px;
    grid-template-areas:
      "header  header"
      "content sidebar"
      "footer  footer";
  }
}

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

2. شبكات البطاقات والمعارض

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

ينشئ هذا التصريح الوحيد شبكة بطاقات متجاوبة تضبط عدد الأعمدة تلقائيًا بناءً على العرض المتاح. كل بطاقة بعرض 280px على الأقل لكنها تنمو لتملأ المساحة المتبقية. لا حاجة لاستعلامات الوسائط. نمط auto-fill مع minmax هذا هو أحد أقوى تقنيات Grid.

3. تخطيط لوحات المعلومات

لوحة المعلومات التي تحتوي على أدوات بأحجام مختلفة تمتد عبر صفوف وأعمدة متعددة مثالية لـ Grid. يمكنك وضع العناصر في مواضع شبكية محددة وتمديدها عبر المسارات:

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 16px;
}

.widget--wide { grid-column: span 2; }
.widget--tall { grid-row: span 2; }
.widget--hero { grid-column: span 2; grid-row: span 2; }

4. تخطيطات المجلات والتحرير

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

5. تخطيط الكأس المقدسة

تخطيط "الكأس المقدسة" الشهير (رأس، جسم ثلاثي الأعمدة مع أشرطة جانبية بعرض ثابت ومركز مرن، تذييل) سهل للغاية مع Grid:

.holy-grail {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

دمج Flexbox و Grid

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

مثال: لوحة معلومات باستخدام Grid و Flexbox

/* Grid for the page structure */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  min-height: 100vh;
}

/* Flexbox for the header content */
.dashboard__header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

/* Flexbox for sidebar menu items */
.dashboard__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

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

أنماط التصميم المتجاوب

نمط Flexbox المتجاوب: الالتفاف

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  flex-shrink: 0;
}

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

نمط Grid المتجاوب: الملء التلقائي

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

ينشئ Grid auto-fill شبكة متجاوبة حقًا بدون أي استعلامات وسائط. يضبط عدد الأعمدة تلقائيًا بناءً على عرض الحاوية، بعرض 300px على الأقل لكل عمود. هذا أقوى من التفاف Flexbox لأن العناصر تتمدد لتملأ الصف بالتساوي.

نمط Grid المتجاوب: التكديس

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

الأخطاء الشائعة وكيفية تجنبها

• استخدام Grid للتخطيطات أحادية الصف: إذا كنت تحتاج فقط إلى عناصر في صف أو عمود واحد، فإن Flexbox أبسط وأكثر ملاءمة. استخدام display: grid مع سطر grid-template-columns واحد عادة ما يكون هندسة مفرطة.
• استخدام Flexbox للتخطيطات ثنائية البعد: محاولة إنشاء تخطيط شبكي باستخدام حاويات flex متداخلة يؤدي إلى كود هش وصعب الصيانة. استخدم Grid لأي تخطيط يحتاج إلى التحكم في كل من الصفوف والأعمدة.
• نسيان gap: يدعم كل من Flexbox و Grid خاصية gap. استخدمها بدلاً من margin لتباعد العناصر. تنطبق فقط بين العناصر، وليس على الحواف، وهو ما تريده عادةً بالضبط.
• تجاوز flex-basis بـ width: في حاوية flex، flex-basis لها الأولوية على width في المحور الرئيسي. تعيين كليهما معًا يمكن أن يؤدي إلى سلوك غير متوقع. استخدم اختصار flex لتجنب الالتباس.
• عدم استخدام minmax: عند تعريف أعمدة الشبكة، فكر دائمًا في استخدام minmax() لمنع الأعمدة من أن تصبح صغيرة جدًا أو كبيرة جدًا. العمود المعرّف كـ 1fr يمكن أن ينكمش إلى الصفر؛ minmax(200px, 1fr) يضمن حدًا أدنى للعرض.
• تجاهل الشبكة الضمنية: عندما يكون لديك عناصر أكثر من مسارات الشبكة المعرّفة، ينشئ Grid مسارات ضمنية. استخدم grid-auto-rows و grid-auto-columns للتحكم في حجم هذه المسارات الضمنية.

دعم المتصفحات

يتمتع كل من Flexbox و Grid بدعم ممتاز من المتصفحات في عام 2026:

كلتا التقنيتين مدعومتان بالكامل في جميع المتصفحات الرئيسية منذ سنوات. لا يوجد سبب لتجنب أي منهما في تطوير الويب الحديث بسبب مشكلات التوافق. خاصية gap في Flexbox كانت آخر ميزة رئيسية تحصل على دعم عالمي، وهي متاحة في جميع المتصفحات منذ عام 2021.

دليل القرار السريع

عند بدء تخطيط جديد، اسأل نفسك هذه الأسئلة:

• هل أحتاج إلى التحكم في كل من الصفوف والأعمدة؟ نعم — Grid. لا — Flexbox.
• هل يجب أن يحدد المحتوى حجم التخطيط، أم يجب أن يحدد التخطيط وضع المحتوى؟ مدفوع بالمحتوى — Flexbox. مدفوع بالتخطيط — Grid.
• هل تحتاج العناصر إلى الالتفاف بشكل طبيعي؟ نعم — Flexbox مع flex-wrap أو Grid مع auto-fill.
• هل أحتاج إلى تداخل العناصر؟ نعم — Grid.
• هل هذا مكون داخل تخطيط أكبر؟ المكون ربما Flexbox، التخطيط الأكبر Grid.