الفرق بين Flexbox و Grid في CSS بالعربي

عند تخطيط صفحات CSS، تواجه أداتين قويّتين: Flexbox و Grid. كثيرون يحتارون أيهما يستخدمون. الفرق أبسط مما تظنّ.

Flexbox — بُعد واحد ↔️

Flexbox مصمّم لترتيب العناصر في اتّجاه واحد: إمّا صفّ أو عمود. مثالي لأشرطة التنقّل والأزرار والقوائم.

.container { display: flex; justify-content: space-between; }

Grid — بُعدان ⊞

CSS Grid مصمّم للتخطيط في بُعدين معًا: صفوف وأعمدة. مثالي لتخطيط الصفحة الكامل والمعارض (Galleries).

.container { display: grid; grid-template-columns: 1fr 1fr 1fr; }

مثال عملي: بطاقات منتجات في صفّ

جرّب بناء شريط بطاقات منتجات يلتفّ تلقائيًّا لسطر جديد عند ضيق الشاشة:

/* بـ Flexbox: يعمل، لكن محاذاة العناصر بين الأسطر المختلفة غير مضبوطة تلقائيًّا */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card { flex: 1 1 250px; } /* كل بطاقة ≥ 250px، تتمدّد لتملأ الفراغ */

/* بـ Grid: أعمدة متساوية تلقائيًّا حسب المساحة المتاحة، بمحاذاة مثالية */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

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

جدول المقارنة

خطأ شائع عند المبتدئين

محاولة بناء شبكة (Grid) حقيقية باستخدام Flexbox وحده عبر flex-wrap فقط — يعمل ظاهريًّا لكنه يفشل بمجرّد اختلاف ارتفاع العناصر بين الصفوف (تختفي المحاذاة الرأسية). إذا كان تخطيطك يحتاج فعليًّا صفوفًا وأعمدة متزامنة، لا "تحايل" بـ Flexbox — استخدم Grid مباشرةً، هو المصمَّم لهذا بالضبط.

كيف تختار؟

• ترتّب عناصر في صفّ أو عمود؟ → Flexbox.
• تبني تخطيطًا كاملًا بصفوف وأعمدة؟ → Grid.
• الأفضل: استخدمهما معًا — Grid للهيكل، Flexbox للتفاصيل.

الخلاصة

ليست منافسة بل تكامل: Flexbox لبُعد واحد، Grid لبُعدين. إتقانهما معًا يجعلك قادرًا على بناء أي تخطيط.

تعمّق في مسار CSS.