كيفية التحكم في العناصر داخل CSS Grid - دليل شامل لـ Grid Items

🧱 التحكم في العناصر: دليلك الشامل لفهم CSS Grid Items

في الدرس السابق، تعلمنا كيفية إنشاء شبكة (Grid Container) وتقسيمها إلى أعمدة وصفوف. لكن السؤال الآن: كيف نتحكم في كل عنصر داخل هذه الشبكة؟ هذا هو بالضبط ما سنتعلمه اليوم: خصائص Grid Items.

Grid Items هي العناصر المباشرة داخل الحاوية الشبكية (Grid Container). كل <div>، أو <p>، أو أي عنصر آخر يصبح "عنصر شبكي" (Grid Item) يمكننا التحكم في موقعه وحجمه بشكل مستقل.

🔍 فهم العناصر الأساسية في الشبكة

لنبدأ بمثال بسيط. تخيل أن لدينا حاوية شبكية (Grid Container) تحتوي على 6 عناصر:

<div class="container">
  <div class="item">عنصر 1</div>
  <div class="item">عنصر 2</div>
  <div class="item">عنصر 3</div>
  <div class="item">عنصر 4</div>
  <div class="item">عنصر 5</div>
  <div class="item">عنصر 6</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 80px);
  gap: 10px;
}
.item {
  background-color: lightblue;
  border: 2px solid darkblue;
  padding: 10px;
}

في هذا المثال، كل عنصر .item سيشغل خلية واحدة تلقائياً، وسيتم ترتيبها من اليسار لليمين ومن أعلى لأسفل. ولكن ماذا لو أردنا تغيير هذا الترتيب؟

🧭 تحديد موقع العنصر: grid-column و grid-row

الخاصيتان الأكثر قوة للتحكم في العناصر هما grid-column و grid-row. تسمحان لك بتحديد بداية ونهاية العنصر في الأعمدة والصفوف.

كيف تعمل؟

• الشبكة لها خطوط (Grid Lines) مرقمة. بين كل خطين توجد مسار (Track).
• يبدأ الترقيم من 1 من الجهة اليسرى (للأعمدة) أو من الأعلى (للصفوف).

/* مثال: جعل العنصر الأول يمتد على عمودين */
.item-1 {
  grid-column-start: 1; /* يبدأ من الخط الأول */
  grid-column-end: 3;   /* وينتهي قبل الخط الثالث (أي يشغل العمودين 1 و 2) */
}

/* الطريقة المختصرة الشائعة */
.item-1 {
  grid-column: 1 / 3; /* بداية / نهاية */
}

/* مثال آخر: جعل العنصر يشغل صفين */
.item-2 {
  grid-row: 1 / 3; /* يبدأ من الخط الأول للصفوف وينتهي قبل الخط الثالث */
}

✨ الكلمة السحرية: span

غالباً لا نريد حساب الخطوط يدوياً. هنا تأتي الكلمة السحرية span والتي تعني "يمتد على".

.item-special {
  /* يبدأ من العمود 2 ويمتد على عمودين */
  grid-column: 2 / span 2;

  /* طريقة أخرى: يبدأ من أي مكان تلقائي ويمتد على 3 أعمدة */
  /* grid-column: span 3; */
}

مثال عملي: لنصنع رأس موقع (Header) يمتد على عرض الشبكة بالكامل.

.header {
  grid-column: 1 / span 3; /* أو ببساطة: 1 / 4 */
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
}

📐 محاذاة عنصر واحد: justify-self و align-self

تتحكم هذه الخصائص في محاذاة العنصر داخل الخلية التي يشغلها، وليس محاذاة كل العناصر في الحاوية (وهو ما تفعله justify-items و align-items على مستوى الحاوية).

• justify-self: تحكم في المحاذاة على المحور الأفقي (من اليسار إلى اليمين).
• align-self: تحكم في المحاذاة على المحور العمودي (من الأعلى إلى الأسفل).

القيم الشائعة: start، end، center، stretch (الافتراضي).

.item-center {
  justify-self: center; /* يحاذي العنصر أفقياً في منتصف الخلية */
  align-self: center;   /* يحاذي العنصر عمودياً في منتصف الخلية */
  /* يمكن استخدامها معاً لعنصر في المنتصف تماماً */
}

.item-end {
  justify-self: end; /* يلتصق العنصر بالجهة اليمنى للخلية */
}

🗺️ الخاصية الشاملة: grid-area

هذه خاصية مختصرة قوية يمكنها أن تجمع كل شيء! لها استخدامان رئيسيان:

1. التسمية (للإشارة لاحقاً في grid-template-areas):

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

(سنتعمق في هذا في درس لاحق).

2. التحديد المختصر للموقع:

.item {
  /* الترتيب: grid-row-start / grid-column-start / grid-row-end / grid-column-end */
  grid-area: 2 / 1 / 4 / 3;
  /* يعني: يبدأ من الصف 2 والعمود 1، وينتهي قبل الصف 4 وقبل العمود 3 */
}

🧪 مثال شامل: بناء لوحة تحكم مصغرة

لنطبق ما تعلمناه في مثال واقعي بسيط:

<div class="dashboard">
  <div class="card profile">الملف الشخصي</div>
  <div class="card stats">الإحصائيات</div>
  <div class="card main">المحتوى الرئيسي</div>
  <div class="card notifications">الإشعارات</div>
</div>

.dashboard {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-rows: 100px 200px;
  gap: 15px;
  padding: 20px;
}

.card {
  background: #f0f0f0;
  border-radius: 8px;
  padding: 15px;
}

.profile {
  grid-row: 1; /* يشغل الصف الأول */
  align-self: start; /* يلتصق بأعلى خليته */
}

.stats {
  grid-column: 2; /* يشغل العمود الثاني */
  grid-row: span 2; /* يمتد على صفين */
  justify-self: center;
}

.main {
  grid-column: 1 / span 2; /* يبدأ من العمود 1 ويمتد ليشمل العمود 2 أيضًا */
  grid-row: 2; /* في الصف الثاني */
}

.notifications {
  /* سيأخذ مكانه التلقائي (الخلية المتبقية) */
}

في هذا المثال، تحكمنا في حجم وموقع كل بطاقة (Card) بشكل مستقل داخل الشبكة.

🎯 الخلاصة والتمرين العملي

تذكر أن:

1. grid-column و grid-row تحدد موقع العنصر ومدى امتداده.
2. span هي حليفك لتمديد العنصر دون حساب خطوط معقدة.
3. justify-self و align-self تتحكمان في محاذاة العنصر داخل مساحته المحددة.
4. grid-area خاصية مختصرة قوية للتسمية أو تحديد الموقع.