CSS Grid: دليل شامل للتخطيط الشبكي المتقدم والتحكم ثنائي الأبعاد

مقالات علاء عامر

نقدم مجموعة شاملة من مقالات التعليمية الهامة في تطوير الويب لتحويل أفكارك إلى واقع رقمي

CSS Grid: دليل شامل للتخطيط الشبكي المتقدم والتحكم ثنائي الأبعاد

CSS 2026-01-01 علاء عامر

CSS Grid: دليل شامل للتخطيط الشبكي المتقدم والتحكم ثنائي الأبعاد

دليل تخصصي من علاء عامر – مطور ومصمم مواقع وتطبيقات محترف

CSS Grid هو نظام التخطيط الأقوى للتحكم في الصفوف والأعمدة. تعلم إنشاء تخطيطات معقدة ومتجاوبة بدقة عالية.

2️⃣ تعريف الأعمدة والصفوف

.grid-definition {
  display: grid;

  /* تعريف الأعمدة */
  grid-template-columns:
    200px /* عمود ثابت */
    1fr /* عمود مرن */
    minmax(100px, 200px) /* عمود بحد أدنى وأقصى */
    auto; /* حسب المحتوى */

  /* تعريف الصفوف */
  grid-template-rows:
    60px /* رأس ثابت */
    1fr /* محتوى مرن */
    50px; /* ذيل ثابت */

  /* تعريف باستخدام أسماء الخطوط */
  grid-template-columns:
    [sidebar-start] 250px
    [sidebar-end main-start] 1fr
    [main-end aside-start] 200px
    [aside-end];
}

/* أمثلة متقدمة */
.responsive-columns {
  display: grid;

  /* شبكة متجاوبة */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.magazine-layout {
  display: grid;
  grid-template-columns:
    1fr /* المحتوى الرئيسي */
    300px /* الشريط الجانبي */
    200px; /* الإعلانات */
  grid-template-rows:
    80px /* الرأس */
    1fr /* المحتوى */
    60px; /* الذيل */
  gap: 20px;
  min-height: 100vh;
}

4️⃣ Grid Areas - المناطق المحددة

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

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

/* تخطيط متجاوب بتغيير المناطق */
@media (max-width: 768px) {
  .layout-areas {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "aside"
      "footer";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
  }
}

/* تخطيط مجلة معقد */
.magazine-areas {
  display: grid;
  grid-template-areas:
    "header header header header"
    "hero hero sidebar-1 sidebar-1"
    "article-1 article-2 sidebar-1 sidebar-1"
    "article-3 article-3 sidebar-2 ads"
    "footer footer footer footer";
  grid-template-columns: 1fr 1fr 200px 150px;
  gap: 20px;
}

6️⃣ Grid المتجاوب المتقدم

/* شبكة متجاوبة بالكامل */
.responsive-advanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

/* تخطيطات مختلفة للشاشات */
.adaptive-layout {
  display: grid;
  gap: 20px;

  /* الشاشات الكبيرة */
  grid-template-columns: 250px 1fr 200px;
  grid-template-areas:
    "sidebar main aside"
    "sidebar main aside";
}

@media (max-width: 1024px) {
  .adaptive-layout {
    /* الشاشات المتوسطة */
    grid-template-columns: 200px 1fr;
    grid-template-areas:
      "sidebar main"
      "aside aside";
  }
}

@media (max-width: 768px) {
  .adaptive-layout {
    /* الشاشات الصغيرة */
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "sidebar"
      "aside";
  }
}

/* شبكة بكثافة مختلفة */
.density-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 15px;
}

.featured-item {
  grid-column: span 6; /* نصف العرض */
}

.regular-item {
  grid-column: span 4; /* ثلث العرض */
}

.small-item {
  grid-column: span 3; /* ربع العرض */
}

@media (max-width: 768px) {
  .featured-item,
  .regular-item,
  .small-item {
    grid-column: span 12; /* عرض كامل على الموبايل */
  }
}

7️⃣ مشروع عملي: لوحة تحكم متقدمة

<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>لوحة التحكم المتقدمة</title>
    <link rel="stylesheet" href="grid-dashboard.css" />
  </head>
  <body>
    <div class="dashboard">
      <!-- الرأس -->
      <header class="dashboard-header">
        <div class="logo">
          <h1>لوحة التحكم</h1>
        </div>
        <div class="header-controls">
          <input type="search" placeholder="بحث..." class="search-input" />
          <div class="user-profile">
            <span>أحمد محمد</span>
            <div class="avatar">أ</div>
          </div>
        </div>
      </header>

      <!-- الشريط الجانبي -->
      <nav class="sidebar">
        <div class="nav-section">
          <h3>الرئيسية</h3>
          <ul class="nav-menu">
            <li><a href="#" class="active">نظرة عامة</a></li>
            <li><a href="#">التحليلات</a></li>
            <li><a href="#">التقارير</a></li>
          </ul>
        </div>
        <div class="nav-section">
          <h3>البيانات</h3>
          <ul class="nav-menu">
            <li><a href="#">المستخدمون</a></li>
            <li><a href="#">المنتجات</a></li>
            <li><a href="#">الطلبات</a></li>
          </ul>
        </div>
      </nav>

      <!-- المحتوى الرئيسي -->
      <main class="main-content">
        <!-- بطاقات الإحصائيات -->
        <section class="stats-cards">
          <div class="stat-card primary">
            <div class="stat-icon">👥</div>
            <div class="stat-info">
              <h3>المستخدمون</h3>
              <p class="stat-number">12,456</p>
              <p class="stat-change positive">+12%</p>
            </div>
          </div>

          <div class="stat-card success">
            <div class="stat-icon">💰</div>
            <div class="stat-info">
              <h3>المبيعات</h3>
              <p class="stat-number">85,230</p>
              <p class="stat-change positive">+8%</p>
            </div>
          </div>

          <div class="stat-card warning">
            <div class="stat-icon">📦</div>
            <div class="stat-info">
              <h3>الطلبات</h3>
              <p class="stat-number">3,421</p>
              <p class="stat-change negative">-3%</p>
            </div>
          </div>

          <div class="stat-card info">
            <div class="stat-icon">📊</div>
            <div class="stat-info">
              <h3>التحليلات</h3>
              <p class="stat-number">98.5%</p>
              <p class="stat-change positive">+2%</p>
            </div>
          </div>
        </section>

        <!-- الرسوم البيانية -->
        <section class="charts-section">
          <div class="chart-card large">
            <div class="card-header">
              <h3>نظرة عامة على المبيعات</h3>
              <select class="time-filter">
                <option>آخر 7 أيام</option>
                <option>آخر 30 يوم</option>
                <option>آخر 3 أشهر</option>
              </select>
            </div>
            <div class="chart-placeholder">
              <p>رسم بياني للمبيعات</p>
            </div>
          </div>

          <div class="chart-card medium">
            <div class="card-header">
              <h3>توزيع المستخدمين</h3>
            </div>
            <div class="chart-placeholder">
              <p>رسم دائري</p>
            </div>
          </div>
        </section>

        <!-- جداول البيانات -->
        <section class="data-tables">
          <div class="table-card">
            <div class="card-header">
              <h3>أحدث الطلبات</h3>
              <button class="view-all-btn">عرض الكل</button>
            </div>
            <div class="table-container">
              <table class="data-table">
                <thead>
                  <tr>
                    <th>رقم الطلب</th>
                    <th>العميل</th>
                    <th>المبلغ</th>
                    <th>الحالة</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>#12345</td>
                    <td>محمد أحمد</td>
                    <td>250 ريال</td>
                    <td><span class="status completed">مكتمل</span></td>
                  </tr>
                  <tr>
                    <td>#12346</td>
                    <td>فاطمة محمد</td>
                    <td>180 ريال</td>
                    <td><span class="status pending">قيد المعالجة</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </section>
      </main>

      <!-- الشريط الجانبي الثانوي -->
      <aside class="secondary-sidebar">
        <div class="widget">
          <h4>الأنشطة الأخيرة</h4>
          <div class="activity-list">
            <div class="activity-item">
              <div class="activity-icon">✅</div>
              <div class="activity-text">
                <p>تم إكمال طلب جديد</p>
                <small>منذ 5 دقائق</small>
              </div>
            </div>
            <div class="activity-item">
              <div class="activity-icon">👤</div>
              <div class="activity-text">
                <p>مستخدم جديد سجل</p>
                <small>منذ 12 دقيقة</small>
              </div>
            </div>
          </div>
        </div>

        <div class="widget">
          <h4>الإشعارات</h4>
          <div class="notification-list">
            <div class="notification-item important">
              <p>تحديث النظام متاح</p>
              <button class="notification-action">تثبيت</button>
            </div>
          </div>
        </div>
      </aside>
    </div>
  </body>
</html>

/* grid-dashboard.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Cairo", Arial, sans-serif;
  background: #f5f7fa;
  color: #333;
}

/* تخطيط اللوحة الرئيسي */
.dashboard {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "sidebar main aside";
  grid-template-columns: 250px 1fr 280px;
  grid-template-rows: 70px 1fr;
  min-height: 100vh;
}

/* الرأس */
.dashboard-header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  background: white;
  border-bottom: 1px solid #e0e6ed;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.logo h1 {
  font-size: 1.4rem;
  color: #2d3748;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 20px;
}

.search-input {
  padding: 8px 15px;
  border: 1px solid #e0e6ed;
  border-radius: 8px;
  width: 250px;
  font-size: 14px;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar {
  width: 35px;
  height: 35px;
  background: #4299e1;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* الشريط الجانبي */
.sidebar {
  grid-area: sidebar;
  background: white;
  border-left: 1px solid #e0e6ed;
  padding: 30px 0;
  overflow-y: auto;
}

.nav-section {
  margin-bottom: 30px;
  padding: 0 25px;
}

.nav-section h3 {
  font-size: 12px;
  text-transform: uppercase;
  color: #a0aec0;
  margin-bottom: 15px;
  font-weight: 600;
}

.nav-menu {
  list-style: none;
}

.nav-menu li {
  margin-bottom: 5px;
}

.nav-menu a {
  display: block;
  padding: 12px 15px;
  color: #4a5568;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-size: 14px;
}

.nav-menu a:hover,
.nav-menu a.active {
  background: #ebf8ff;
  color: #2b6cb0;
}

/* المحتوى الرئيسي */
.main-content {
  grid-area: main;
  padding: 30px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 30px;
  overflow-y: auto;
}

/* بطاقات الإحصائيات */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.stat-card {
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 15px;
  transition: transform 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

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

.stat-card.primary .stat-icon {
  background: #ebf8ff;
}
.stat-card.success .stat-icon {
  background: #f0fff4;
}
.stat-card.warning .stat-icon {
  background: #fffbeb;
}
.stat-card.info .stat-icon {
  background: #f0f4ff;
}

.stat-info h3 {
  font-size: 14px;
  color: #718096;
  margin-bottom: 5px;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 3px;
}

.stat-change {
  font-size: 12px;
  font-weight: 600;
}

.stat-change.positive {
  color: #38a169;
}
.stat-change.negative {
  color: #e53e3e;
}

/* قسم الرسوم البيانية */
.charts-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.chart-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 1px solid #e0e6ed;
}

.card-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #2d3748;
}

.time-filter {
  padding: 6px 12px;
  border: 1px solid #e0e6ed;
  border-radius: 6px;
  font-size: 13px;
  background: white;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a0aec0;
  background: #f7fafc;
}

/* جداول البيانات */
.data-tables {
  display: grid;
  gap: 20px;
}

.table-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.view-all-btn {
  padding: 6px 15px;
  background: #4299e1;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.view-all-btn:hover {
  background: #3182ce;
}

.table-container {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 15px 25px;
  text-align: right;
  border-bottom: 1px solid #e0e6ed;
}

.data-table th {
  background: #f7fafc;
  font-weight: 600;
  font-size: 13px;
  color: #4a5568;
}

.data-table td {
  font-size: 14px;
  color: #2d3748;
}

.status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.status.completed {
  background: #c6f6d5;
  color: #22543d;
}

.status.pending {
  background: #fbd38d;
  color: #744210;
}

/* الشريط الجانبي الثانوي */
.secondary-sidebar {
  grid-area: aside;
  padding: 30px 20px;
  background: #f7fafc;
  border-right: 1px solid #e0e6ed;
  overflow-y: auto;
}

.widget {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.widget h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #2d3748;
}

.activity-item,
.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #e0e6ed;
}

.activity-item:last-child,
.notification-item:last-child {
  border-bottom: none;
}

.activity-icon {
  font-size: 16px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f4ff;
  border-radius: 6px;
}

.activity-text p {
  font-size: 13px;
  margin-bottom: 3px;
  color: #2d3748;
}

.activity-text small {
  font-size: 11px;
  color: #a0aec0;
}

.notification-item.important {
  background: #fef5e7;
  padding: 15px;
  border-radius: 8px;
  border: none;
}

.notification-action {
  padding: 4px 12px;
  background: #ed8936;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}

/* التصميم المتجاوب */
@media (max-width: 1024px) {
  .dashboard {
    grid-template-areas:
      "header header"
      "sidebar main"
      "sidebar main";
    grid-template-columns: 200px 1fr;
  }

  .secondary-sidebar {
    display: none;
  }

  .charts-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard {
    grid-template-areas:
      "header"
      "main"
      "main";
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }

  .main-content {
    padding: 20px;
  }

  .stats-cards {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

الخلاصة

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

✅ مفاهيم CSS Grid الأساسية ✅ تعريف الأعمدة والصفوف المتقدم ✅ وضع العناصر والمناطق المحددة ✅ المحاذاة في Grid ✅ التصميم المتجاوب مع Grid ✅ مشروع لوحة تحكم متقدمة

في الدرس القادم سندرس Position والموضع للتحكم الدقيق في موضع العناصر.

📩 تحتاج مساعدة في CSS Grid؟

CSS Grid Layout Responsive Advanced Frontend Web Design

قسم المقالة

CSS

CSS Grid: دليل شامل للتخطيط الشبكي المتقدم والتحكم ثنائي الأبعاد

إتقان CSS Grid - التخطيط الشبكي، المناطق، المحاذاة، والتحكم الدقيق في الصفوف والأعمدة. دليل عملي للتخطيطات المعقدة.

التواصل والاستشارة

تواصل مباشر عبر الواتساب أو الهاتف لفهم احتياجات مشروعك بدقة.

التخطيط والجدولة

وضع خطة عمل واضحة مع جدول زمني محدد لكل مرحلة من المشروع.

البرمجة والتطوير

تطوير المشروع بأحدث التقنيات لضمان الأداء والأمان العاليين.

المراجعة والتسليم

ختبار شامل ومراجعة دقيقة قبل التسليم النهائي للمشروع.

علاء عامر

مطور ويب محترف بخبرة تزيد عن 10 سنوات في بناء حلول رقمية مبتكرة.

هل تحتاج هذه الخدمة؟

تواصل معي الآن للحصول على استشارة مجانية وعرض سعر

تواصل عبر واتساب رضاكم هو هدفنا الأسمى

عروض إضافية

صيانة وتحديث المواقع

نحافظ على موقعك آمنًا ومحدّثًا دائمًا
ربط الأنظمة وواجهات البرمجة

نربط أنظمتك بواجهات برمجية قوية ومرنة
تصميم وتحسين قواعد البيانات

استعلامات أسرع وهيكلة أوضح وأخطاء أقل
تأمين المواقع والحماية المتقدمة

حماية موقعك من التهديدات السيبرانية
أتمتة العمليات والمهام البرمجية

نؤتمت المهام المتكررة ونوفّر وقتك دائمًا

لديك استفسار؟

اتصل بنا الآن

00201014714795

راسلنا عبر البريد الإلكتروني

[email protected]

علاء عامر

مقالات علاء عامر

CSS Grid: دليل شامل للتخطيط الشبكي المتقدم والتحكم ثنائي الأبعاد

CSS Grid: دليل شامل للتخطيط الشبكي المتقدم والتحكم ثنائي الأبعاد

دليل تخصصي من علاء عامر – مطور ومصمم مواقع وتطبيقات محترف

2️⃣ تعريف الأعمدة والصفوف

4️⃣ Grid Areas - المناطق المحددة

6️⃣ Grid المتجاوب المتقدم

7️⃣ مشروع عملي: لوحة تحكم متقدمة

الخلاصة

قسم المقالة

CSS Grid: دليل شامل للتخطيط الشبكي المتقدم والتحكم ثنائي الأبعاد

التواصل والاستشارة

التخطيط والجدولة

البرمجة والتطوير

المراجعة والتسليم

علاء عامر

مقالات ذات صلة

مقدمة CSS الشاملة: دليل المطورين من البداية للاحتراف

المحددات المتقدمة والخصائص الأساسية في CSS: دليل شامل

Box Model ونموذج الصندوق في CSS: دليل شامل لفهم التخطيط

هل تحتاج هذه الخدمة؟

عروض إضافية

صيانة وتحديث المواقع

ربط الأنظمة وواجهات البرمجة

تصميم وتحسين قواعد البيانات

تأمين المواقع والحماية المتقدمة

أتمتة العمليات والمهام البرمجية

لديك استفسار؟