سلسلة دروس CSS | الدرس الثلاثون: تصميم تخطيط صفحة كاملة باستخدام Grid و Flexbox معًا

 الهدف:

في هذا الدرس سنتعلم كيفية دمج Flexbox و CSS Grid لتصميم تخطيط صفحة متكاملة، مثل صفحات المواقع الحقيقية.

---

مكونات الصفحة التي سنصممها:

• رأس الصفحة (Header) – باستخدام Grid
• قائمة جانبية (Sidebar) – باستخدام Grid
• المحتوى الرئيسي (Main Content) – باستخدام Flexbox
• تذييل (Footer) – باستخدام Grid

---

الشكل الهيكلي (HTML):

<div class="container">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>
    <div class="card">Content 1</div>
    <div class="card">Content 2</div>
    <div class="card">Content 3</div>
  </main>
  <footer>Footer</footer>
</div>

---

التنسيق باستخدام CSS:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

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

header {
  grid-area: header;
  background-color: #2c3e50;
  color: white;
  padding: 20px;
  text-align: center;
}

aside {
  grid-area: sidebar;
  background-color: #ecf0f1;
  padding: 20px;
}

main {
  grid-area: main;
  padding: 20px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.card {
  background-color: #3498db;
  color: white;
  padding: 20px;
  flex: 1 1 200px;
  border-radius: 8px;
}

footer {
  grid-area: footer;
  background-color: #2c3e50;
  color: white;
  text-align: center;
  padding: 15px;
}

---

ماذا تعلمنا في هذا الدرس؟

• استخدام CSS Grid لتقسيم الصفحة إلى مناطق.
• استخدام Flexbox داخل منطقة main لتوزيع المحتوى بسهولة.
• دمج النظامين لإنشاء صفحات احترافية ومتجاوبة.

---

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

1. أنشئ صفحة شبيهة بما سبق.
2. جرّب تغيير grid-template-areas لترتيب مختلف.
3. أضف عناصر داخل aside و footer.
4. استخدم Media Queries لجعل التخطيط متجاوبًا.

---

تهانينا!

لقد أنهيت سلسلة 30 درسًا متكاملًا في CSS.
أصبحت الآن قادرًا على بناء صفحات أنيقة باستخدام:

• تنسيقات النصوص والألوان
• التحكم في الحشو والهوامش
• Flexbox و CSS Grid
• التأثيرات، الأنيميشن، والتحكم المتقدم في التخطيط