Flexbox و CSS Grid — دليل شامل التخطيط الحديث 2026

في المقال السابق، تعلمت الألوان و Box Model. الآن سنتعلم Flexbox و CSS Grid — وهما أداتان حديثتان لبناء أي تخطيط تريده.

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

لماذا التخطيط الحديث؟

قبل Flexbox و Grid:

• نستخدم float و table (طرق قديمة).
• صعوبة التوسيط.
• كود معقد.

مع Flexbox و Grid:

• ✅ بسيط وسهل.
• ✅ مرن.
• ✅ يعمل على كل الأجهزة.

الفرق بين Flexbox و Grid

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

القاعدة:

• Flexbox: للتخطيط الخطي (صف أو عمود).
• Grid: للتخطيط الشبكي (صفوف وأعمدة).

Flexbox

Flexbox هو نظام تخطيط أحادي البعد.

الإعداد

.container {
  display: flex;
}

هذا كل شيء! الآن الأطفال داخل .container سيصطفون أفقياً.

الاتجاه (flex-direction)

.container {
  display: flex;
  flex-direction: row;      /* أفقي (افتراضي) */
  flex-direction: column;   /* عمودي */
  flex-direction: row-reverse;    /* أفقي معكوس */
  flex-direction: column-reverse; /* عمودي معكوس */
}

المحاذاة الأفقية (justify-content)

.container {
  display: flex;
  justify-content: flex-start;    /* البداية (افتراضي) */
  justify-content: flex-end;      /* النهاية */
  justify-content: center;        /* المنتصف */
  justify-content: space-between; /* توزيع متساوٍ */
  justify-content: space-around;  /* حول العناصر */
  justify-content: space-evenly;  /* متساوٍ تماماً */
}

المحاذاة العمودية (align-items)

.container {
  display: flex;
  align-items: stretch;      /* تمدد (افتراضي) */
  align-items: flex-start;   /* البداية */
  align-items: flex-end;     /* النهاية */
  align-items: center;       /* المنتصف */
  align-items: baseline;     /* خط الأساس */
}

الالتفاف (flex-wrap)

.container {
  display: flex;
  flex-wrap: nowrap;   /* بدون التفاف (افتراضي) */
  flex-wrap: wrap;     /* التفاف */
  flex-wrap: wrap-reverse; /* التفاف معكوس */
}

المسافة بين العناصر (gap)

.container {
  display: flex;
  gap: 20px;           /* مسافة موحدة */
  gap: 20px 40px;      /* عمودي أفقي */
}

توسيط عنصر تماماً

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

هذا الكود يُوسّط أي عنصر أفقياً وعمودياً — الطريقة الأسهل!

التحكم في العناصر

.item {
  flex-grow: 1;    /* النمو */
  flex-shrink: 1;  /* الانكماش */
  flex-basis: 200px; /* الحجم الأساسي */

  /* اختصار: */
  flex: 1;          /* grow=1, shrink=1, basis=0 */
  flex: 0 1 auto;   /* افتراضي */
  flex: 1 1 200px;  /* grow=1, shrink=1, basis=200px */
}

أمثلة Flexbox

1. شريط تنقل

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #3b82f6;
  color: white;
}

2. بطاقات

.cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.card {
  flex: 1 1 300px;
  background: white;
  padding: 20px;
  border-radius: 12px;
}

3. توسيط

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea, #764ba2);
}

CSS Grid

CSS Grid هو نظام تخطيط ثنائي البعد.

الإعداد

.container {
  display: grid;
}

تعريف الأعمدة (grid-template-columns)

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px; /* 3 أعمدة */
  grid-template-columns: 1fr 1fr 1fr;       /* 3 أعمدة متساوية */
  grid-template-columns: repeat(3, 1fr);    /* نفس السابق */
  grid-template-columns: 1fr 2fr 1fr;       /* نسب مختلفة */
}

الوحدة fr: جزء من المساحة المتبقية.

تعريف الصفوف (grid-template-rows)

.container {
  display: grid;
  grid-template-rows: 100px 200px 100px;
  grid-template-rows: repeat(3, 1fr);
}

المسافات (gap)

.container {
  display: grid;
  gap: 20px;
  gap: 20px 40px; /* عمودي أفقي */
}

التخطيط بالمناطق (grid-template-areas)

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px 1fr 60px;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

النتيجة: تخطيط صفحة كامل بسهولة!

التوسيط في Grid

.container {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

place-items: center = align-items + justify-items.

auto-fit و minmax

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

الفائدة: شبكة تلقائية تتكيف مع حجم الشاشة!

جدول خصائص Flexbox

الخاصية	الوظيفة
display: flex	تفعيل Flexbox
flex-direction	الاتجاه
justify-content	محاذاة أفقية
align-items	محاذاة عمودية
flex-wrap	الالتفاف
gap	المسافة
flex	حجم العنصر

جدول خصائص Grid

الخاصية	الوظيفة
display: grid	تفعيل Grid
grid-template-columns	الأعمدة
grid-template-rows	الصفوف
gap	المسافة
grid-template-areas	المناطق
place-items	محاذاة
auto-fit	تكيف تلقائي
minmax()	حد أدنى وأقصى

أمثلة عملية

1. شريط تنقل (Flexbox)

<nav class="navbar">
  <div class="logo">شعاري</div>
  <ul class="links">
    <li><a href="/">الرئيسية</a></li>
    <li><a href="/about">من نحن</a></li>
    <li><a href="/contact">اتصل</a></li>
  </ul>
  <button>تسجيل الدخول</button>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background: #1e293b;
  color: white;
}

.links {
  display: flex;
  gap: 30px;
  list-style: none;
}

.links a {
  color: white;
  text-decoration: none;
}

2. شبكة منتجات (Grid)

<div class="products">
  <div class="product">منتج 1</div>
  <div class="product">منتج 2</div>
  <div class="product">منتج 3</div>
  <div class="product">منتج 4</div>
  <div class="product">منتج 5</div>
  <div class="product">منتج 6</div>
</div>

.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 40px;
}

.product {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

3. تخطيط صفحة كامل (Grid)

<div class="layout">
  <header>الرأس</header>
  <aside>الشريط الجانبي</aside>
  <main>المحتوى الرئيسي</main>
  <footer>التذييل</footer>
</div>

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: 80px 1fr 60px;
  min-height: 100vh;
  gap: 20px;
  padding: 20px;
}

header { grid-area: header; background: #3b82f6; }
aside { grid-area: sidebar; background: #f3f4f6; }
main { grid-area: main; background: white; }
footer { grid-area: footer; background: #1e293b; color: white; }

4. توسيط عنصر

Flexbox:

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

Grid:

.container {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

تمارين عملية

تمرين 1: صف أفقي

أنشئ 3 عناصر في صف أفقي.

الحل:

.container {
  display: flex;
  gap: 20px;
}

.item {
  flex: 1;
  padding: 20px;
  background: #3b82f6;
  color: white;
}

تمرين 2: توسيط

وسّط عنصراً في منتصف الشاشة.

الحل:

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

تمرين 3: شريط تنقل

أنشئ شريط تنقل: شعار يسار، روابط يمين.

الحل:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #3b82f6;
  color: white;
}

.links {
  display: flex;
  gap: 20px;
  list-style: none;
}

تمرين 4: شبكة 3 أعمدة

أنشئ شبكة من 3 أعمدة متساوية.

الحل:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

تمرين 5: شبكة تلقائية

أنشئ شبكة تتكيف مع حجم الشاشة.

الحل:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

تمرين 6: بطاقة مع صورة ونص

أنشئ بطاقة: صورة يسار، نص يمين (أو العكس).

الحل:

.card {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: white;
  border-radius: 12px;
}

.card img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

تمرين 7: تخطيط صفحة

أنشئ تخطيط: header، sidebar، main، footer.

الحل:

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: 80px 1fr 60px;
  min-height: 100vh;
  gap: 20px;
}

header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }

تمرين 8: معرض صور

أنشئ معرضاً بشبكة تلقائية.

الحل:

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

.gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
}

حل المشاكل الشائعة

🔴 المشكلة 1: العناصر لا تصطف

السبب: لم تُفعّل Flexbox.

الحل:

.container {
  display: flex;  /* ← ضروري */
}

🔴 المشكلة 2: gap لا يعمل

السبب: gap لا يعمل مع display: inline.

الحل: تأكد من display: flex أو display: grid.

🔴 المشكلة 3: الشبكة لا تتكيف

السبب: استخدام قيم ثابتة بدلاً من fr.

الحل:

/* ❌ */
grid-template-columns: 300px 300px 300px;

/* ✅ */
grid-template-columns: repeat(3, 1fr);

🔴 المشكلة 4: Overflow في Flexbox

السبب: المحتوى أكبر من الحاوية.

الحل:

.container {
  display: flex;
  flex-wrap: wrap;
}

جدول مقارنة سريعة

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

قائمة تحقق نهائية

المهمة	الحالة
فهم Flexbox	⬜
استخدام justify-content و align-items	⬜
توسيط عنصر بـ Flexbox	⬜
فهم CSS Grid	⬜
grid-template-columns و areas	⬜
auto-fit و minmax	⬜
حل التمارين الثمانية	⬜

ماذا بعد هذا المقال؟

الآن بعد أن أتقنت Flexbox و Grid، أنت جاهز للمقال الأخير:

1. مشروع متكامل — موقع شخصي كامل.

الخلاصة

في هذا المقال، تعلمت:

• ✅ Flexbox للتخطيط الخطي.
• ✅ justify-content و align-items.
• ✅ CSS Grid للتخطيط الشبكي.
• ✅ grid-template-columns و grid-template-areas.
• ✅ auto-fit و minmax.
• ✅ توسيط عنصر (Flexbox و Grid).
• ✅ حل 8 تمارين عملية.

تذكر: Flexbox و Grid هما أداتان قويتان. أتقنهما، وستتمكن من بناء أي تخطيط.