CSS - Grid Item عناصر الشبكة

CSS - عناصر الشبكة (Grid Items)

🔸 عند استخدام display: grid على عنصر حاوي، فإن كل عنصر بداخله يُصبح عنصر شبكة (Grid Item) ويمكنك التحكم في موقعه وحجمه باستخدام خصائص محددة.

---

🔹 1. grid-column

🔹 تُستخدم لتحديد من أي عمود يبدأ العنصر وإلى أي عمود يمتد.

.item1 {
  grid-column: 1 / 3;
}

📌 يبدأ من العمود 1 وينتهي قبل العمود 3 (أي يشغل عمودين).

---

🔹 2. grid-row

🔹 تُستخدم لتحديد من أي صف يبدأ العنصر وإلى أي صف يمتد.

.item1 {
  grid-row: 1 / 3;
}

📌 يشغل الصفين الأول والثاني.

---

🔹 3. grid-area

🔹 اختصار لـ: grid-row-start / grid-column-start / grid-row-end / grid-column-end

.item1 {
  grid-area: 1 / 2 / 3 / 4;
}

📌 يبدأ من الصف 1، العمود 2، وينتهي قبل الصف 3، العمود 4.

---

🔹 4. justify-self و align-self

🔹 تُستخدم لمحاذاة العنصر داخل خلية الشبكة.

.item {
  justify-self: center;  /* أفقيًا */
  align-self: end;       /* رأسيًا */
}

📌 القيم المتاحة: start, end, center, stretch

---

🧪 مثال عملي على التحكم بموقع العناصر

<style>
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background: #ddd;
  padding: 10px;
}
.item1 {
  background: #fff;
  padding: 20px;
  grid-column: 1 / 3;
}
.item2 {
  background: #eee;
  padding: 20px;
}
</style>

<div class="container">
  <div class="item1">يمتد عبر عمودين</div>
  <div class="item2">عادي</div>
  <div class="item2">عادي</div>
</div>

---

📌 ملاحظات هامة

• كل عنصر داخل Grid Container يمكن تخصيص موقعه بدون التأثير على باقي العناصر.
• استخدم grid-area للمرونة العالية في التحديد الكامل للموقع.
• justify-self وalign-self تعطيك تحكمًا دقيقًا في محاذاة العنصر داخل الخلية.