التصميم المتجاوب باستخدام CSS Grid

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

مقدمة إلى CSS Grid

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

إنشاء شبكة أساسية

لإنشاء شبكة، استخدم الخاصية display: grid على الحاوية:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px; /* 3 أعمدة بعرض 200px */
  grid-template-rows: 100px 100px; /* صفان بارتفاع 100px */
  gap: 20px; /* المسافة بين الخلايا */
}

الوحدة fr والدالة repeat()

تُعد الوحدة fr (جزء من المساحة) مفيدة بشكل خاص لإنشاء تخطيطات متجاوبة:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* النسبة 1:2:1 */
  grid-template-rows: auto;
}

تتيح الدالة repeat() تكرار القيم:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 أعمدة متساوية */
  grid-template-rows: repeat(2, 100px); /* صفان بارتفاع 100px */
}

وضع العناصر داخل الشبكة

يمكنك وضع العناصر بدقة داخل الشبكة:

.item1 {
  grid-column: 1 / 3; /* من الخط 1 إلى الخط 3 */
  grid-row: 1 / 2; /* من الصف 1 إلى الصف 2 */
}

/* أو باستخدام الخاصيتين start/end */
.item2 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

شبكات متجاوبة باستخدام minmax() وauto-fill/auto-fit

تتيح الدالة minmax() تحديد حجم أدنى وحجم أقصى:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

• auto-fill: ينشئ أكبر عدد ممكن من الأعمدة
• auto-fit: يمدّد الأعمدة الموجودة لملء المساحة

مناطق الشبكة المسمّاة

يمكنك تسمية مناطق شبكتك لوضع العناصر بطريقة أكثر بداهة:

.container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

مثال على تخطيط متجاوب

إليك مثالًا على تخطيط متجاوب يتكيّف مع مختلف أحجام الشاشات:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
}

/* على الشاشات الصغيرة، يتم تكديس العناصر */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

تخطيط متقدم باستخدام Grid Areas

يمكنك إنشاء تخطيطات معقدة تتغير بحسب حجم الشاشة:

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content aside"
    "footer footer footer";
  grid-template-columns: 1fr 3fr 1fr;
  grid-gap: 20px;
}

@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

المحاذاة في Grid

يوفر CSS Grid عدة خصائص لمحاذاة العناصر:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  
  /* المحاذاة الأفقية للعناصر داخل خلاياها */
  justify-items: start | end | center | stretch;
  
  /* المحاذاة الرأسية للعناصر داخل خلاياها */
  align-items: start | end | center | stretch;
  
  /* المحاذاة الأفقية للشبكة بأكملها */
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  
  /* المحاذاة الرأسية للشبكة بأكملها */
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

مثال عملي: معرض صور متجاوب

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
  <img src="image5.jpg" alt="Image 5">
  <img src="image6.jpg" alt="Image 6">
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 15px;
}

.gallery img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 5px;
  transition: transform 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.05);
}

الخلاصة

يُعد CSS Grid أداة قوية لإنشاء تخطيطات ويب متجاوبة ومعقدة. وبدمج Grid مع استعلامات الوسائط (media queries)، يمكنك إنشاء مواقع تتكيّف تمامًا مع أي حجم شاشة.

لتعميق معرفتك بـ CSS Grid، أنصحك باستكشاف التوثيق على MDN والتدرّب باستخدام أدوات تفاعلية مثل Grid Garden.