الدرس 8: Grid وتصميم متجاوب | المستوى الثاني

👨‍💻

كتبه: فريق أكاديمية البرمجة

تم تحديثه: 10 يوليو 2026 | مدة القراءة: 20 دقيقة

🔍 ليه CSS Grid هو الأداة الأقوى للتخطيطات المعقدة؟

Flexbox حل 90% من مشاكل التخطيط أحادي البعد (صف أو عمود). بس لما نحتاج نبني تخطيطات ثنائية الأبعاد — زي صفحة كاملة بـ Header, Sidebar, Main Content, Footer — Flexbox بيصعب. هنا بيجي دور CSS Grid.

من خلال 8 سنوات في تطوير المواقع، لاحظت إن:

📐 Grid بيختصر 50% من كود CSS في التخطيطات المعقدة
📱 التصميم المتجاوب (Responsive) بقى ضرورة — 65% من الزيارات من الموبايل في 2026
⚡ Google بتحب المواقع المتجاوبة — التصميم المتجاوب بيحسن SEO بشكل كبير

في الدرس ده (الأخير في المستوى الثاني!) هنتعلم:

✅ الفرق بين Flexbox و Grid وإمتى نستخدم كل واحد
✅ بناء شبكات (Grids) باستخدام الأعمدة والصفوف
✅ دمج الخلايا (Grid Areas) لبناء تخطيطات معقدة
✅ التصميم المتجاوب باستخدام Media Queries
✅ 3 أمثلة عملية: صفحة كاملة، Gallery، Dashboard

⚠️ نصيحة من خبرة: Google في 2026 بيستخدم "Mobile-First Indexing" — يعني جوجل بتفهرس نسخة الموبايل من موقعك الأول. لو موقعك مش متجاوب، هتفقد 60% من فرص الظهور في نتائج البحث!

📖 ما هو CSS Grid؟

CSS Grid هو نظام تخطيط ثنائي الأبعاد (Two-Dimensional Layout) — يعني بيتحكم في الصفوف والأعمدة في نفس الوقت. ده بيخلي بناء تخطيطات معقدة زي:

📰 صفحات الجرائد (Newspaper Layout)
🖼️ معارض الصور (Image Galleries)
📊 لوحات التحكم (Dashboards)
🛒 صفحات المنتجات (E-commerce)

تكون أسهل بكتير من Flexbox.

Flexbox vs Grid — إمتى نستخدم كل واحد؟

المعيار	Flexbox	CSS Grid
الأبعاد	أحادي البعد (صف أو عمود)	ثنائي الأبعاد (صف + عمود)
الاتجاه	row أو column	row و column معًا
الاستخدام الأمثل	Navbar, Cards, Sidebar	صفحات كاملة, Galleries, Dashboards
التحكم في الأحجام	flex-grow, flex-basis	grid-template-columns/rows
الترتيب	order (بسيط)	grid-area (معقد ومرن)

💡 القاعدة الذهبية: استخدم Flexbox للمكونات الداخلية (Components) — زي Navbar, Button Group, Card. استخدم Grid للتخطيطات الكبيرة (Layouts) — زي الصفحة كاملة, Gallery, Dashboard. وممكن تستخدمهم معًا: Grid للتخطيط الكلي، وFlexbox داخل كل خلية!

🎯 الخصائص الأساسية للحاوية (Grid Container)

1️⃣ تفعيل Grid

زي Flexbox، كل اللي محتاجه هو display: grid على الحاوية.

/* ✅ تفعيل Grid */
.grid-container {
    display: grid;
}
        

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

الأعمدة هي "الخطوط العمودية" اللي بتقسم الصفحة. ممكن تحددها بـ px, %, fr, أو auto.

/* ✅ 3 أعمدة متساوية باستخدام fr */
grid-template-columns: 1fr 1fr 1fr;

/* ✅ نفس الشيء باختصار */
grid-template-columns: repeat(3, 1fr);

/* ✅ أعمدة بأحجام مختلفة */
grid-template-columns: 200px 1fr 2fr;
/* عمود 1: 200px ثابت */
/* عمود 2: ياخد 1 جزء من المساحة الباقية */
/* عمود 3: ياخد 2 جزء (ضعف عمود 2) */

/* ✅ تلقائي حسب المحتوى */
grid-template-columns: auto 1fr auto;
/* عمود 1: حسب المحتوى */
/* عمود 2: ياخد الباقي */
/* عمود 3: حسب المحتوى */
        

🌟 وحدة fr (fraction): fr هي "جزء" من المساحة الباقية. لو عندك 1fr 2fr، المساحة هتتقسم 3 أجزاء: الأول ياخد 1/3، والتاني ياخد 2/3. fr أفضل من % لأنها بتتعامل مع المساحة الباقية بعد ما تخصص الأحجام الثابتة.

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

نفس الفكرة بس للصفوف (الخطوط الأفقية).

/* ✅ تعريف الصفوف */
grid-template-rows: 100px auto 200px;
/* صف 1: 100px (Header) */
/* صف 2: auto (يتكيف مع المحتوى — Main) */
/* صف 3: 200px (Footer) */
        

4️⃣ المسافة بين الخلايا (gap)

نفس gap في Flexbox — بس في Grid بيشتغل في الاتجاهين (أفقي وعمودي).

/* ✅ gap في Grid */
gap: 20px;           /* 20px في كل الاتجاهات */
gap: 10px 20px;    /* 10px صفوف، 20px أعمدة */
row-gap: 10px;
column-gap: 20px;
        

⚡ التخطيط التلقائي المتجاوب (Auto-Fit + Minmax)

ده السلاح السري في Grid — بيخلي العناصر تتكيف تلقائيًا مع حجم الشاشة بدون Media Queries!

/* ✅ السلاح السري: auto-fit + minmax */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* ✅ شرح: */
/* repeat(auto-fit, ...) — يكرر الأعمدة لحد ما يملأ الصف */
/* minmax(250px, 1fr) — كل عمود: أقل حاجة 250px، أقصى حاجة 1fr */
/* النتيجة: على الديسكتوب = 4 أعمدة، على التابلت = 2، على الموبايل = 1 */
        

🎯 ليه ده قوي جدًا؟ بدون auto-fit، كنت هتحتاج 3 Media Queries (للموبايل، التابلت، والديسكتوب). مع auto-fit + minmax، Grid بيحسب تلقائيًا كام عمود يقدر يحط في الصف — ولو مفيش مساحة كافية، العنصر ينزل لسطر جديد!

🎨 دمج الخلايا (Grid Areas)

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

الطريقة الأولى: grid-column و grid-row

/* ✅ دمج الخلايا باستخدام خطوط الشبكة */
.header {
    grid-column: 1 / 4;   /* من خط العمود 1 لـ 4 (يغطي 3 أعمدة) */
    grid-row: 1 / 2;     /* في الصف الأول */
}

.sidebar {
    grid-column: 1 / 2;   /* العمود الأول */
    grid-row: 2 / 4;     /* من الصف 2 لـ 4 (يغطي 2 صفوف) */
}

.main {
    grid-column: 2 / 4;   /* العمودين 2 و 3 */
    grid-row: 2 / 3;     /* الصف 2 */
}

.footer {
    grid-column: 1 / 4;   /* 3 أعمدة */
    grid-row: 3 / 4;     /* الصف 3 */
}
        

الطريقة الثانية: grid-template-areas (الأفضل!)

الطريقة دي بتخلي التخطيط واضح زي "رسم" — بتسمي كل منطقة وتعيينها في CSS.

/* ✅ تعريف المناطق في الحاوية */
.layout {
    display: grid;
    grid-template-columns: 250px 1fr 1fr;
    grid-template-rows: 80px auto 100px;
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
    gap: 20px;
    min-height: 100vh;
}

/* ✅ تعيين كل عنصر لمنطقته */
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
        

⚡ ليه grid-template-areas أفضل؟ لأنها بتخلي التخطيط واضح في CSS — لو عايز تغيّر التخطيط (مثلاً تحط Sidebar في اليمين بدل اليسار)، بتغيّر بس الـ grid-template-areas. ده أسهل بكتير من تعديل grid-column/grid-row لكل عنصر!

📱 التصميم المتجاوب (Responsive Design)

التصميم المتجاوب يعني إن الموقع يشتغل بشكل جيد على كل الأجهزة — من الموبايل الصغير لشاشة 4K. فيه طريقتين: Media Queries (القديمة) و Auto-Fit (الحديثة).

1️⃣ Media Queries — التحكم الدقيق

Media Queries بتتيح لك تطبيق CSS مختلف حسب حجم الشاشة. في 2026، الأفضل هو نهج "Mobile First" — بتصمم للموبايل أولاً، وبعدين تضيف تحسينات للشاشات الأكبر.

/* ✅ Mobile First: تصميم الموبايل أولاً */
.container {
    width: 100%;
    padding: 1rem;
}

/* ✅ التابلت (768px وما فوق) */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
        padding: 2rem;
    }
}

/* ✅ الديسكتوب (1024px وما فوق) */
@media (min-width: 1024px) {
    .container {
        width: 1000px;
    }
}

/* ✅ الشاشات الكبيرة (1200px وما فوق) */
@media (min-width: 1200px) {
    .container {
        width: 1200px;
    }
}
        

💡 لماذا Mobile First؟ لأن 65% من الزيارات من الموبايل. لو تصممت للديسكتوب أولاً، هتضطر "تشيل" حاجات في الموبايل — ده أصعب من "تضيف" حاجات في الديسكتوب. كمان Google بتفهرس نسخة الموبايل أولاً (Mobile-First Indexing)!

2️⃣ نقاط التوقف الشائعة (Breakpoints)

Breakpoints هي "نقاط" في عرض الشاشة اللي بتغيّر فيها التصميم. دي النقاط الشائعة في 2026:

الجهاز	العرض	الاستخدام
جوال صغير	حتى 576px	عمود واحد، خط كبير
جوال كبير	577px - 768px	عمودين، قائمة مطوية
تابلت	769px - 992px	3 أعمدة، Sidebar ظاهر
ديسكتوب	993px - 1200px	4 أعمدة، كل المحتوى ظاهر
شاشات كبيرة	أكبر من 1200px	5 أعمدة، مساحات أكبر

3️⃣ الجمع بين Grid و Media Queries

/* ✅ Mobile First: Sidebar تحت المحتوى */
.layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
        "header"
        "main"
        "sidebar"
        "footer";
    gap: 1rem;
}

/* ✅ الديسكتوب: Sidebar على اليمين */
@media (min-width: 768px) {
    .layout {
        grid-template-columns: 250px 1fr;
        grid-template-areas: 
            "header header"
            "sidebar main"
            "footer footer";
    }
}
        

💡 3 أمثلة عملية من مشاريع حقيقية

1️⃣ صفحة كاملة (Header + Sidebar + Main + Footer)

/* ✅ صفحة كاملة باستخدام Grid Areas */
.page-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 80px auto 60px;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
    gap: 0;
    min-height: 100vh;
}

.header {
    grid-area: header;
    background: #2c3e50;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 2rem;
}

.sidebar {
    grid-area: sidebar;
    background: #34495e;
    color: white;
    padding: 2rem;
}

.main {
    grid-area: main;
    padding: 2rem;
    background: #f8f9fa;
}

.footer {
    grid-area: footer;
    background: #2c3e50;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
        

2️⃣ Gallery متجاوب (بدون Media Queries!)

/* ✅ Gallery متجاوب تلقائيًا */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 2rem;
}

.gallery img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.3s;
}

.gallery img:hover {
    transform: scale(1.05);
}
        

🌟 object-fit: cover بتخلي الصورة تملأ المساحة المحددة (250px) بدون ما تتشوه. لو نسبة العرض/الارتفاع مختلفة، الصورة هتتقص عشان تملأ المساحة — ده أحسن من object-fit: contain اللي بيخلي الصورة كاملة بس ممكن تسيب مساحات فاضية.

3️⃣ Dashboard ببيانات (Grid + Flexbox معًا)

/* ✅ Dashboard: Grid للتخطيط الكلي، Flexbox داخل البطاقات */
.dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 2rem;
}

.stat-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.stat-info h3 {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
}

.stat-info p {
    margin: 5px 0 0 0;
    font-size: 1.5rem;
    font-weight: bold;
    color: #2c3e50;
}
        

💡 أفضل الممارسات من مشاريع حقيقية

📋 قائمة التحقق قبل نشر أي موقع متجاوب:

✅ استخدمت نهج Mobile First (الموبايل أولاً)
✅ اختبرت الموقع على 3 أحجام شاشة على الأقل
✅ الصور فيها max-width: 100% و object-fit: cover
✅ الخطوط مقروءة في الموبايل (≥ 16px)
✅ الأزرار كبيرة بما يكفي للإصبع (≥ 44px)
✅ المسافات كافية بين العناصر (≥ 8px)
✅ المحتوى مش بيخرج برا الشاشة (horizontal scroll)
✅ استخدمت auto-fit + minmax للتجاوب التلقائي

❌ أخطاء شائعة يجب تجنبها:

الخطأ ❌	الصح ✅	السبب
تصميم للديسكتوب أولاً	تصميم للموبايل أولاً (Mobile First)	Google بتفهرس نسخة الموبايل أولاً
استخدام px لكل الأحجام	استخدام rem و vw/vh	px ثابتة ومش بتتكيف مع الشاشات
نسيان اختبار الموقع على الموبايل	اختبار على أجهزة حقيقية أو Chrome DevTools	المحاكي مش بيدي نتائج دقيقة 100%
صور كبيرة بدون ضغط	ضغط الصور + استخدام srcset	الصور الكبيرة بتبطئ الموقع على الموبايل
استخدام Grid لكل حاجة	Grid للتخطيط الكلي + Flexbox للمكونات	كل أداة لها استخدامها الأمثل

🎓 ملخص المستوى الثاني

مبروك! خلصت المستوى الثاني — ده إنجاز كبير! هنا ملخص اللي اتعلمته:

📚 ما اتعلمته في المستوى الثاني:

✅ HTML: بناء هيكل الصفحات (عناوين، فقرات، روابط، صور، جداول، نماذج)
✅ CSS: تنسيق الصفحات (ألوان، خطوط، أبعاد، تباعد)
✅ Box Model: فهم المحتوى، Padding، Border، Margin
✅ Flexbox: تخطيط مرن أحادي البعد (Navbar, Cards, Sidebar)
✅ CSS Grid: تخطيط ثنائي الأبعاد (صفحات كاملة, Galleries, Dashboards)
✅ Responsive Design: تصميم يشتغل على كل الأجهزة (Mobile First, Media Queries)

🎉 مبروك! خلصت المستوى الثاني!

دلوقتي عندك مهارات HTML & CSS كافية لبناء مواقع احترافية. الخطوة الجاية: اختبر نفسك في اختبار المستوى النهائي، وبعدين انتقل للمستوى الثالث (JavaScript) عشان تضيف التفاعل لمواقعك! 🚀

🎯 CSS Grid والتصميم المتجاوب: بناء مواقع احترافية لكل الأجهزة