تعلّم CSS Grid عملياً عبر بناء 5 تخطيطات احترافية في وقت قصير

تُعد CSS Grid من أقوى الأدوات الحديثة لبناء تخطيطات الواجهات في الويب، خصوصاً عندما تحتاج إلى التحكم الدقيق في مواضع العناصر، وأبعادها، وتوزيعها داخل الصفحة. ورغم أن هذا النظام يبدو واسعاً في البداية، فإن تعلمه يصبح أسهل كثيراً عند تطبيقه على أمثلة عملية وواضحة.

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

إذا كنت تبحث عن طريقة عملية لفهم CSS Grid، فالأمثلة التالية تمنحك أساساً قوياً لتصميم صفحات متجاوبة ومرتبة بأسلوب احترافي.

1. إنشاء تخطيط Pancake Stack باستخدام CSS Grid

يُعد تخطيط Pancake Stack من أكثر الأنماط استخداماً في صفحات الويب، لأنه يناسب الصفحات التي تحتوي على رأس علوي ومحتوى رئيسي وتذييل سفلي. الفكرة هنا بسيطة: نجعل الصفحة مكوّنة من ثلاثة صفوف، بحيث يتمدد الصف الأوسط ليملأ المساحة المتبقية تلقائياً.

نستخدم الخاصية grid-template-rows بالقيمة auto 1fr auto. هذا يعني أن الصف الأول والثالث سيأخذان المساحة التي يحتاجها المحتوى فقط، بينما الصف الثاني سيتمدد ليشغل ما تبقى من ارتفاع الحاوية.

.task-1 .container {
  display: grid;
  height: 100vh;
  grid-template-rows: auto 1fr auto;
}

هذا النوع من التخطيط يظهر كثيراً في صفحات المقالات، ولوحات التحكم، وواجهات التطبيقات التي تحتاج إلى محتوى رئيسي مرن بين جزأين ثابتين نسبياً.

2. بناء شبكة من 12 عموداً عبر CSS Grid

شبكة 12-column grid من أشهر الأساليب المستخدمة في تصميم الواجهات، لأنها تمنحك مرونة ممتازة في توزيع العناصر أفقياً. وباستخدام CSS Grid، يصبح تنفيذها أكثر وضوحاً وسهولة من كثير من الطرق التقليدية.

لإنشاء 12 عموداً متساوياً، نستخدم repeat(12, 1fr) داخل الخاصية grid-template-columns. كما يمكن إضافة مسافة بين الأعمدة باستخدام column-gap.

.task-2 .container {
  display: grid;
  height: 100vh;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 12px;
  align-items: center;
}

بعد إنشاء الأعمدة، نحدد موضع كل عنصر داخل الشبكة. على سبيل المثال، إذا أردنا أن يبدأ العنصر الأول من العمود الثاني ويمتد عبر أربعة أعمدة، يمكننا كتابة ذلك بأكثر من صيغة.

.task-2 .item-1 {
  grid-column-start: 2;
  grid-column-end: 6;
}

.task-2 .item-1 {
  grid-column-start: 2;
  grid-column-end: span 4;
}

.task-2 .item-1 {
  grid-column: 2 / span 4;
}

أما العنصر الثاني، فإذا أردته أن يبدأ من العمود السادس ويمتد ستة أعمدة، فسيكون كالتالي:

.task-2 .item-2 {
  grid-column: 6 / span 6;
}

تكمن فائدة هذا النمط في أنه مثالي لتوزيع البطاقات، والأقسام، والعناصر التي تعتمد على تقسيم أفقي واضح داخل الصفحة.

3. إنشاء تخطيط متجاوب Responsive Layout بطريقتين

في هذه المرحلة، ننتقل إلى التخطيطات المتجاوبة التي تتكيف مع أحجام الشاشات المختلفة. وسنستخدم طريقتين شائعتين:

• الطريقة الأولى: الاعتماد على شبكة 12-column grid.
• الطريقة الثانية: استخدام الخاصية grid-template-areas.

الطريقة الأولى: استخدام شبكة 12-column grid

في نسخة الجوال، يمكن بناء التخطيط على شكل صفوف متتالية، مع تخصيص الصف الثالث ليكون قابلاً للتمدد حتى يستوعب المحتوى الرئيسي.

.task-3-1 .container {
  display: grid;
  height: 100vh;
  grid-template-rows: auto auto 1fr auto auto auto;
  gap: 24px;
}

عندما يصبح عرض الشاشة أكبر من 720px، يمكننا التحول إلى تخطيط يعتمد على 12 عموداً و4 صفوف:

@media (min-width: 720px) {
  .task-3-1 .container {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto 1fr auto;
  }
}

بعد ذلك نحدد مساحة كل جزء من أجزاء الصفحة، مثل الرأس والتنقل والمحتوى الجانبي والإعلانات والتذييل:

@media (min-width: 720px) {
  .task-3-1 .header {
    grid-column: 1 / span 12;
  }

  .task-3-1 .navigation {
    grid-column: 1 / span 12;
  }

  .task-3-1 .main {
    grid-column: 3 / span 10;
  }

  .task-3-1 .sidebar {
    grid-column: 1 / span 2;
    grid-row: 3;
  }

  .task-3-1 .ads {
    grid-column: 1 / span 2;
  }

  .task-3-1 .footer {
    grid-column: 3 / span 10;
  }
}

لاحظ أهمية الخاصية grid-row: 3 في عنصر .sidebar، لأنها تضمن وضعه في الصف المطلوب حتى لو كان ترتيبه مختلفاً داخل DOM.

أما في الشاشات الأكبر من 1020px، فيمكن إعادة توزيع العناصر بشكل أكثر اتساعاً:

@media (min-width: 1020px) {
  .task-3-1 .navigation {
    grid-column: 3 / span 8;
  }

  .task-3-1 .main {
    grid-column: 3 / span 8;
  }

  .task-3-1 .sidebar {
    grid-row: 2 / 4;
  }

  .task-3-1 .ads {
    grid-column: 11 / span 2;
    grid-row: 2 / 4;
  }

  .task-3-1 .footer {
    grid-column: 1 / span 12;
  }
}

هذا النمط مناسب للمواقع الإخبارية، وصفحات المدونات، والمنصات التي تجمع بين المحتوى الرئيسي والعناصر الجانبية.

الطريقة الثانية: استخدام grid-template-areas

إذا كنت تفضّل وصف التخطيط بصرياً بطريقة أكثر وضوحاً، فإن الخاصية grid-template-areas تمنحك أسلوباً ممتازاً لذلك. البداية تكون بتحديد اسم لكل منطقة عبر الخاصية grid-area.

.task-3-2 .header {
  grid-area: header;
}

.task-3-2 .navigation {
  grid-area: nav;
}

.task-3-2 .ads {
  grid-area: ads;
}

.task-3-2 .sidebar {
  grid-area: sidebar;
}

.task-3-2 .main {
  grid-area: main;
}

.task-3-2 .footer {
  grid-area: footer;
}

في نسخة الجوال، يمكن تعريف التخطيط بالشكل التالي:

.task-3-2 .container {
  display: grid;
  height: 100vh;
  gap: 24px;
  grid-template-rows: auto auto 1fr auto auto auto;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "sidebar"
    "ads"
    "footer";
}

الميزة هنا أنك تستطيع تغيير ترتيب العناصر بسهولة كبيرة، فقط عبر تعديل خريطة المناطق دون الحاجة إلى إعادة كتابة مواضع الأعمدة والصفوف.

في الأجهزة اللوحية التي يزيد عرضها عن 720px، يمكن استخدام ثلاث أعمدة وأربع صفوف:

@media (min-width: 720px) {
  .task-3-2 .container {
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "header header header"
      "nav nav nav"
      "sidebar main main"
      "ads footer footer";
  }
}

وفي الشاشات المكتبية الأكبر من 1020px، يصبح التخطيط أكثر اتساعاً مع أربع أعمدة:

@media (min-width: 1020px) {
  .task-3-2 .container {
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "header header header header"
      "sidebar nav nav ads"
      "sidebar main main ads"
      "footer footer footer footer";
  }
}

أي الطريقتين أفضل؟

الإجابة تعتمد على طبيعة المشروع ومدى تعقيد التخطيط المطلوب. للمقارنة بشكل أوضح:

إن كان تخطيطك بسيطاً ويركز على توزيع الأعمدة، فشبكة 12-column grid غالباً ستكون كافية. أما إذا كنت تتعامل مع واجهة غنية بالعناصر المختلفة والمواضع الدقيقة، فخيار grid-template-areas سيكون أكثر راحة ووضوحاً.

4. بناء تخطيط متجاوب بدون Media Queries

من أجمل مزايا CSS Grid أنك تستطيع أحياناً الحصول على تخطيط متجاوب بالكامل دون كتابة أي media query. ويتم ذلك عبر دمج repeat() مع auto-fill وminmax().

.task-4 .container {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

هذه الشيفرة تعني أن الشبكة ستُنشئ أكبر عدد ممكن من الأعمدة داخل المساحة المتاحة، بشرط ألا يقل عرض العمود عن 150px. وإذا توفرت مساحة إضافية، سيتم توزيعها بالتساوي بين الأعمدة.

هذا الأسلوب مثالي لعرض البطاقات، والمنتجات، والمقالات، والصور، لأنه يوفر تجاوباً تلقائياً دون تعقيد إضافي في الشيفرة.

5. إنشاء شبكة شطرنج 12 x 12 باستخدام CSS Grid

لا يقتصر CSS Grid على تحديد الأعمدة فقط، بل يمكنك أيضاً التحكم في الصفوف بنفس الدقة. وهذا يفتح الباب أمام بناء تخطيطات هندسية معقدة، أو لوحات عرض، أو أقسام إبداعية داخل الصفحة.

لإنشاء شبكة مكونة من 12 عموداً و12 صفاً، نستخدم:

.task-5 .container {
  display: grid;
  height: 100vh;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
}

بعدها يمكن وضع العناصر في أي مكان نريده داخل هذه الشبكة. المثال التالي يوضح كيف يمكن توزيع أربعة عناصر على شكل نمط قطري:

.task-5 .item-1 {
  grid-row: 1 / span 3;
  grid-column: 1 / span 3;
}

.task-5 .item-2 {
  grid-row: 4 / span 3;
  grid-column: 4 / span 3;
}

.task-5 .item-3 {
  grid-row: 7 / span 3;
  grid-column: 7 / span 3;
}

.task-5 .item-4 {
  grid-row: 10 / span 3;
  grid-column: 10 / span 3;
}

هذا المثال يبيّن بوضوح كيف يتيح لك Grid التفكير في الصفحة كمساحة ثنائية الأبعاد، وليس مجرد صفوف متتابعة أو أعمدة منفصلة.

نصائح عملية لإتقان CSS Grid بسرعة

• ابدأ دائماً برسم التخطيط ذهنياً أو على ورقة قبل كتابة الشيفرة.
• استخدم fr عندما تحتاج إلى توزيع المساحة المتبقية بمرونة.
• اعتمد على gap بدل الهوامش العشوائية للحفاظ على اتساق المسافات.
• استخدم grid-template-areas عندما يصبح التخطيط معقداً بصرياً.
• جرّب الدمج بين CSS Grid وFlexbox بدلاً من اعتبارهما بديلين متنافسين.

الخلاصة التقنية

إذا أردت بناء واجهات حديثة وقابلة للتوسع، فإن تعلم CSS Grid لم يعد خياراً ثانوياً، بل مهارة أساسية لأي مطور واجهات. قوتها الحقيقية لا تكمن فقط في إنشاء الأعمدة والصفوف، بل في قدرتها على تحويل التخطيط من مهمة مرهقة إلى نظام منطقي وسهل الإدارة. ابدأ بالتخطيطات البسيطة مثل Pancake Stack أو شبكة 12-column، ثم انتقل تدريجياً إلى grid-template-areas والتخطيطات التلقائية، وستجد أن تصميم الواجهات أصبح أكثر سرعة ودقة ومرونة.