كيفية إنشاء واجهة متجاوبة باستخدام CSS Grid

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

ما الذي تحتاجه قبل إنشاء واجهة متجاوبة؟

تحتاج إلى محرر نصوص مثل Visual Studio Code ومتصفح حديث. كما يكفي أن تعرف أساسيات عناصر HTML وطريقة كتابة قواعد CSS. وإذا كنت تبدأ من الصفر، راجع أولًا كيفية كتابة كود CSS. لا تحتاج إلى مكتبة خارجية أو JavaScript لتنفيذ المثال.

كيف تعمل واجهة متجاوبة باستخدام CSS Grid؟

تحوّل الخاصية display: grid العنصر الحاوي إلى شبكة. بعد ذلك تحدد grid-template-columns طريقة توزيع الأعمدة، بينما تضيف gap مسافة ثابتة بينها. ويمكن استخدام repeat() مع auto-fit حتى يختار المتصفح عدد الأعمدة وفق العرض المتاح.

أما الدالة minmax() فتحدد حدًا أدنى لعرض العمود وحدًا أقصى مرنًا. سنستخدم min(100%, 240px) كحد أدنى حتى لا يفرض العمود عرضًا أكبر من الحاوية على الشاشات الضيقة. وتسمح القيمة 1fr للأعمدة بتقاسم المساحة المتبقية بالتساوي.

خطوات إنشاء واجهة متجاوبة باستخدام CSS Grid

1. أنشئ ملف HTML وأضف البطاقات

افتح محرر الأكواد وأنشئ ملفًا باسم index.html. انسخ المثال التالي كاملًا؛ فهو يتضمن هيكل الصفحة وخمس بطاقات ونمط CSS في ملف واحد. يمكنك تغيير نصوص البطاقات وإضافة المزيد منها لاحقًا دون تعديل عدد الأعمدة يدويًا.

<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>بطاقات متجاوبة باستخدام CSS Grid</title>
  <style>
    * { box-sizing: border-box; }
    body {
      font-family: system-ui, sans-serif;
      margin: 0;
      padding: 24px;
      background: #f5f7fb;
      color: #17243a;
    }
    main { max-width: 1080px; margin: auto; }
    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
      gap: 16px;
    }
    .card {
      padding: 24px;
      border: 1px solid #dfe5ed;
      border-radius: 12px;
      background: #ffffff;
    }
    .card h2 { margin-top: 0; }
  </style>
</head>
<body>
  <main>
    <h1>أقسام الموقع</h1>
    <section class="cards" aria-label="أقسام الموقع">
      <article class="card"><h2>التصميم</h2><p>واجهة سهلة الاستخدام.</p></article>
      <article class="card"><h2>البرمجة</h2><p>أمثلة عملية واضحة.</p></article>
      <article class="card"><h2>المحتوى</h2><p>نصوص منظمة ومقروءة.</p></article>
      <article class="card"><h2>الأداء</h2><p>صفحات سريعة الاستجابة.</p></article>
      <article class="card"><h2>الدعم</h2><p>مساعدة عند الحاجة.</p></article>
    </section>
  </main>
</body>
</html>

2. افهم قواعد توزيع الأعمدة

في المثال، يبدأ كل عمود بعرض مناسب للبطاقة ما دامت الحاوية تسمح بذلك. وعندما تتسع الشاشة، ينشئ auto-fit أعمدة إضافية ويجعل 1fr عرضها مرنًا. أما إذا ضاقت الشاشة، فيقل عدد الأعمدة وتنتقل البطاقات الزائدة إلى صفوف تالية. لذلك لا تحتاج إلى كتابة عدد ثابت من الأعمدة لكل جهاز.

3. اختبر النتيجة على أحجام مختلفة

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

تأكد أيضًا من عدم ظهور تمرير أفقي غير مقصود، ومن بقاء النص داخل كل بطاقة مقروءًا. وإذا استخدمت محتوى طويلًا مثل رابط غير قابل للكسر، فقد تحتاج إلى overflow-wrap: anywhere داخل البطاقة. بالإضافة إلى ذلك، اختبر تكبير النص في المتصفح حتى تتأكد من أن التصميم لا يقتطع المحتوى.

متى تحتاج إلى Media Queries مع CSS Grid؟

تنجز الشبكة السابقة توزيع البطاقات تلقائيًا دون نقاط توقف ثابتة. مع ذلك، قد تحتاج إلى استعلامات الوسائط @media إذا أردت تغيير شريط التنقل أو ترتيب أجزاء الصفحة أو حجم المسافات عند عرض معين. على سبيل المثال، يمكنك تقليل الهوامش على الهواتف دون المساس بطريقة عمل الشبكة.

@media (max-width: 480px) {
  body { padding: 12px; }
  .card { padding: 16px; }
}

أخطاء شائعة عند تصميم شبكة CSS Grid متجاوبة

• تحديد عرض ثابت كبير للبطاقة: قد ينتج عنه تمرير أفقي على الهاتف؛ استخدم قياسات مرنة وحدًا أدنى لا يتجاوز عرض الحاوية.
• الاعتماد على صورة لتوضيح الكود: احتفظ بكود HTML و CSS قابلًا للنسخ، واستخدم الصورة لعرض النتيجة فقط.
• الخلط بين auto-fit و auto-fill: قد يحجز auto-fill مسارات فارغة، بينما يدمج auto-fit المسارات الفارغة ويوسّع الموجودة عند توفر مساحة.
• إهمال اختبار المحتوى الحقيقي: العناوين الطويلة والصور الكبيرة قد تغيّر سلوك البطاقات؛ جرّبها قبل النشر.

كيف تطوّر المثال بعد ذلك؟

بعد نجاح النموذج، يمكنك إضافة صور داخل البطاقات بشرط ضبط max-width: 100% لها. كما يمكنك استخدام grid-column لإبراز بطاقة مهمة على أكثر من عمود، مع مراجعة سلوكها في الشاشات الضيقة. وإذا رغبت في تعميق فهمك، راجع شرح CSS Grid الرسمي على MDN، الذي يوضح auto-fit و minmax() بأمثلة تفاعلية.

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