عند تخطيط صفحات 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 | Grid |
|---|---|---|
| الأبعاد | واحد (صفّ/عمود) | اثنان (صفوف وأعمدة) |
| الأنسب لـ | ترتيب عناصر بسيط | تخطيط كامل معقّد |
| التحكّم | محور واحد | محورين |
| الاستخدام | الأكثر يوميًّا | التخطيطات الكبيرة |
كيف تختار؟
- ترتّب عناصر في صفّ أو عمود؟ → Flexbox.
- تبني تخطيطًا كاملًا بصفوف وأعمدة؟ → Grid.
- الأفضل: استخدمهما معًا — Grid للهيكل، Flexbox للتفاصيل.
الخلاصة
ليست منافسة بل تكامل: Flexbox لبُعد واحد، Grid لبُعدين. إتقانهما معًا يجعلك قادرًا على بناء أي تخطيط.