CSS - Grid Intro مقدمة

CSS - تصميم الشبكة (CSS Grid)

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

---

🔹 تفعيل التصميم الشبكي

.container {
  display: grid;
}

📌 عند تعيين display: grid، يُصبح العنصر حاوية شبكة، والعناصر بداخله تصبح عناصر شبكة (grid items).

---

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

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

📌 يُنشئ شبكة من 3 أعمدة عرض كل منها 200px، وصفين ارتفاع كل منهما 100px.

---

🔹 استخدام repeat لتقليل التكرار

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

📌 يُنشئ 3 أعمدة متساوية العرض باستخدام وحدة fr (نسبة من المساحة المتاحة).

---

🧪 مثال عملي على شبكة بسيطة

<style>
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.item {
  background-color: white;
  text-align: center;
  padding: 20px;
  font-size: 30px;
}
</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>

---

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

• استخدم gap لتحديد المسافات بين الصفوف والأعمدة.
• CSS Grid مدعوم بالكامل في جميع المتصفحات الحديثة.
• يمكنك التحكم في أماكن العناصر باستخدام grid-column وgrid-row داخل كل عنصر.