🌟 مقدمة تحفيزية:
“مرحباً بك يا مهندس الويب! هل سبق وشاهدت مواقع إخبارية كبرى أو متاجر عالمية منظمة بشكل مبهر، حيث تجد الصور والنصوص مصفوفة كأنها في شبكة مرسومة بالمسطرة؟ اليوم ستتعلم ‘السر العظيم’ للمصممين المحترفين: نظام الـ Grid.

اليوم، لن نكتفي بوضع العناصر بجانب بعضها، بل سنبني ‘خريطة’ كاملة لموقعك، نحدد فيها مكان كل قطعة بدقة متناهية. استعد، لأنك اليوم ستصبح المعماري الأول لموقعك!”

🏗️ 1. المفهوم : ما هو الـ Grid ؟
تخيل أن صفحة الموقع هي “ورقة مربعات”. الـ Grid يسمح لك بتحديد عدد الأعمدة (Columns) وعدد الصفوف (Rows).

Grid Container : هو الصندوق الكبير الذي يحتوي على كل شيء.

Grid Item : هي العناصر (الأزرار، الصور، النصوص) التي تسكن داخل هذه الشبكة.

💻 2. التطبيق العملي (توزيع دروس الأكاديمية)

لنفترض أننا نريد عرض 3 دورات تدريبية بجانب بعضها بشكل منظم جداً.

في ملف HTML :

<div class="courses-grid">
    <div class="course-card">دورة HTML</div>
    <div class="course-card">دورة CSS</div>
    <div class="course-card">دورة Python</div>
</div>

في ملف CSS (السحر الحقيقي) :

.courses-grid {
    display: grid; /* تفعيل نظام الشبكة */
    grid-template-columns: repeat(3, 1fr); /* اصنع 3 أعمدة متساوية تماماً */
    gap: 20px; /* مسافة أمان أنيقة بين كل كارت وآخر */
    padding: 20px;
}

.course-card {
    background-color: #ffffff;
    border: 2px solid #2c3e50;
    padding: 40px;
    text-align: center;
    border-radius: 15px;
    font-weight: bold;
    transition: 0.3s;
}

.course-card:hover {
    background-color: #f1c40f; /* يتغير للذهبي عند المرور عليه */
    color: #2c3e50;
}

💡 لماذا نستخدم Grid بدلاً من الطرق القديمة؟
في “أكاديمية قياوي”، نهتم بالسرعة والإتقان. الـ Grid يغنيك عن عشرات الأسطر من الكود القديم. بكلمة واحدة repeat(3, 1fr) قمنا بتقسيم الصفحة لثلاثة أقسام متساوية، وهذا هو ذكاء المبرمج المحترف.

🎯 تحدي المعماري المحترف:
“قم بتغيير الكود ليصبح لديك عمودين فقط بدلاً من ثلاثة، واجعل المسافة (gap) بينهما أكبر قليلاً. هل يمكنك جعل الكروت تظهر بشكل طولي؟ جرب واستمتع بالتحكم المطلق في صفحتك!”

🚀 ماذا بعد هذا الإبداع؟
بانتهاء هذا الدرس، أنت لم تعد تتعلم التنسيق.. أنت الآن “تصممه”. لقد أكملنا أهم مهارات CSS.