CSS - Grid Columns, Rows الصفوف والأعمدة

CSS - الأعمدة والصفوف في Grid

🔸 في CSS Grid، يتم تعريف الأعمدة والصفوف باستخدام الخصيتين: grid-template-columns وgrid-template-rows. وهما يُحددان عدد الأعمدة والصفوف، وحجم كل منها.

---

🔹 تحديد الأعمدة باستخدام grid-template-columns

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

📌 هذا يُنشئ شبكة مكونة من 3 أعمدة: الأول 100px، الثاني 200px، والثالث يأخذ المساحة المتبقية تلقائيًا.

---

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

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

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

---

🔹 تحديد الصفوف باستخدام grid-template-rows

.container {
  display: grid;
  grid-template-rows: 100px auto 50px;
}

📌 هنا لدينا 3 صفوف: الأول 100px، الثاني تلقائي حسب المحتوى، والثالث 50px.

---

🧪 مثال عملي

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 100px 100px;
  gap: 10px;
  background: #ccc;
  padding: 10px;
}
.item {
  background: #fff;
  text-align: center;
  line-height: 100px;
  font-size: 20px;
}
</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>

---

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

• fr تعني "جزء من المساحة المتاحة" وهي وحدة مهمة في تصميم الشبكات المرنة.
• يمكنك دمج قيم ثابتة (px) مع fr في نفس الشبكة.
• استخدم gap للفصل بين الأعمدة والصفوف بدون الحاجة إلى margin.