سلسلة دروس CSS | الدرس السابع والعشرون: الفرق بين Flexbox و CSS Grid – متى نستخدم كل منهما؟

في CSS لدينا نظامان حديثان لتنسيق العناصر:

• Flexbox: لتنسيق العناصر في اتجاه واحد (أفقي أو عمودي)
• Grid: لتنسيق العناصر في صفوف وأعمدة في آنٍ واحد

كل نظام له ميزاته، ويُستخدم بحسب نوع التخطيط المطلوب.

---

أولاً: Flexbox

ما هو؟

نظام مرن لترتيب العناصر في خط واحد (row) أو عمود واحد (column).

الاستخدام المثالي:

• القوائم الأفقية أو الرأسية
• شريط تنقل (Navbar)
• ترتيب العناصر داخل بطاقة (Card)
• مكونات بسيطة لا تتطلب تخطيطاً شبكياً

مثال:

<div class="flex-container">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>

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

---

ثانيًا: Grid

ما هو؟

نظام تخطيط شبكي ثنائي الأبعاد يسمح بترتيب العناصر في صفوف وأعمدة.

الاستخدام المثالي:

• تصميم صفحة كاملة
• تخطيطات معقدة تحتوي على أعمدة وصفوف
• المعارض (Galleries)، الجداول، لوحات التحكم (Dashboards)

مثال:

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

---

مقارنة سريعة بين Flex و Grid

المعيار	Flexbox	CSS Grid
الاتجاه	اتجاه واحد فقط	صفوف وأعمدة
التعقيد	بسيط وسهل	أعقد لكن أقوى للتصميم الكامل
التوزيع التلقائي	جيد للعناصر المتغيرة	أفضل لتحكم كامل
الأمثلة المناسبة	Navbar – Buttons – Cards	صفحات – معارض صور – Layouts

---

كيف أختار؟

• تخطيط بسيط باتجاه واحد؟ استخدم Flexbox
• تخطيط كامل للصفحة أو شبكة من العناصر؟ استخدم Grid
• أحيانًا يمكن دمجهما معًا: استخدم Grid لتقسيم الصفحة، وFlexbox لترتيب العناصر داخل كل قسم

---

الواجب العملي:

1. أنشئ تخطيط باستخدام Flexbox فيه 3 صناديق أفقية.
2. أنشئ تخطيط باستخدام Grid فيه 2 صف و3 أعمدة.
3. جرّب دمج النظامين: استخدم Grid لتقسيم الصفحة، وFlexbox داخل كل خلية.