🚀 إتقان المسافات في CSS Grid باستخدام خاصية Gap

مرحباً بك مرة أخرى في رحلتك لتعلم CSS Grid! في الدروس السابقة، تعلمنا كيفية إنشاء شبكة (Grid) ووضع العناصر داخلها. ولكن قد تلاحظ أن العناصر تكون ملتصقة ببعضها دون أي مسافات. هنا يأتي دور البطل الخفي لتنسيق الشبكات: خاصية Gap! 🎯

خاصية gap هي أداة بسيطة وقوية تتيح لك التحكم في المسافات بين صفوف وأعمدة الـ Grid، مما يمنح تصميمك مظهراً أكثر أناقة وتنظيماً.

💡 ما هي خاصية Grid Gap؟

ببساطة شديدة، gap هي خاصية CSS تُستخدم حصرياً مع تخطيط الـ Grid (وأيضاً Flexbox في إصدارات CSS الحديثة) لتعريف المسافة الفاصلة بين صفوف وأعمدة الشبكة.

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

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px; /* هذه المسافة ستطبق بين جميع الصفوف والأعمدة */
}

الشرح: هنا، سيتم إضافة مسافة 20 بكسل بين كل عمود وبين كل صف في الشبكة.

✨ كيفية استخدام خاصية Gap

يمكن استخدام gap بطريقتين رئيسيتين:

1. الخاصية المختصرة gap

هذه هي الطريقة الأكثر شيوعاً وسهولة. يمكنك تحديد مسافتين بالقيم المطلوبة:

  • القيمة الأولى: للمسافة بين الصفوف (row-gap).
  • القيمة الثانية: للمسافة بين الأعمدة (column-gap).
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
  
  /* gap: <row-gap> <column-gap>; */
  gap: 30px 15px; /* 30px بين الصفوف، 15px بين الأعمدة */
}

الشرح: إذا كتبت قيمة واحدة فقط، سيتم تطبيقها على كل من الصفوف والأعمدة. مثال: gap: 20px; تعادل gap: 20px 20px;

2. الخصائص المنفصلة row-gap و column-gap

إذا أردت تحكماً أدق، يمكنك استخدام كل خاصية على حدة.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  
  row-gap: 40px;   /* مسافة كبيرة بين الصفوف */
  column-gap: 10px; /* مسافة صغيرة بين الأعمدة */
}

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

🧪 لنطبق ما تعلمناه: مثال عملي

لننشئ شبكة بسيطة لمعرض صور ونطبق عليها خاصية gap.

الـ HTML:

<div class="gallery">
  <div>صورة 1</div>
  <div>صورة 2</div>
  <div>صورة 3</div>
  <div>صورة 4</div>
  <div>صورة 5</div>
  <div>صورة 6</div>
</div>

الـ CSS بدون Gap:

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* لاحظ عدم وجود خاصية gap هنا */
}
.gallery div {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

النتيجة: ستكون الصناديق الستة ملتصقة ببعضها بدون أي مسافات.

الآن لنضيف Gap:

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px; /* إضافة سحرية واحدة تغير الشكل بالكامل! */
}
.gallery div {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

النتيجة: الآن أصبحت هناك مسافة جميلة ومتساوية مقدارها 25 بكسل بين كل الصفوف والأعمدة، مما يجعل المعرض يبدو أكثر احترافية وسهولة في القراءة.

💎 ملخص سريع

  • gap: خاصية مختصرة تحدد المسافة بين الصفوف والأعمدة معاً (gap: row-gap column-gap;).
  • row-gap: تحدد المسافة بين الصفوف فقط.
  • column-gap: تحدد المسافة بين الأعمدة فقط.
  • يمكن استخدام وحدات القياس مثل px, em, rem, وحتى %.