CSS - Grid Container الحاوية

CSS - حاوية الشبكة (Grid Container)

🔸 في CSS Grid، عندما تضيف الخاصية display: grid أو display: inline-grid إلى عنصر، فإنه يُصبح "حاوية شبكة" (Grid Container)، والعناصر بداخله تُصبح "عناصر شبكة" (Grid Items).

---

🔹 1. تفعيل الشبكة

.container {
  display: grid;
}

📌 هذا يجعل العنصر حاوية Grid. إذا كنت تريده داخل السطر، استخدم inline-grid.

---

🔹 2. تحديد الأعمدة والصفوف

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 80px 80px;
}

📌 هذا يُحدد 3 أعمدة عرضها 100px، وصفين ارتفاع كل منهما 80px.

---

🔹 3. إضافة فجوات بين العناصر (gap)

.container {
  display: grid;
  gap: 10px;
}

📌 تستخدم gap لتحديد المسافة بين الصفوف والأعمدة بدون الحاجة لـ margin.

---

🧪 مثال عملي

<style>
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.item {
  background-color: white;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>

<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>

📌 يُنشئ هذا المثال شبكة من 3 أعمدة، ويتم توزيع العناصر تلقائيًا حسب عددها، مع وجود فجوات بينها.

---

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

• أي عنصر داخل Grid Container يُصبح عنصر شبكة ويمكن التحكم بموقعه باستخدام grid-row و grid-column.
• gap أفضل من استخدام margin لأنه لا يؤثر على العناصر الخارجية.
• CSS Grid يدعم تصميم تخطيطات معقدة بثلاث أسطر فقط.