تحديد مواقع العناصر في Grid-row

جزء من قسم CSS Mastery في رحلة HTML على Coddy — الدرس 32 من 43.

تتيح لك الخاصية grid-row التحكم في مكان وضع العنصر عموديًا في CSS Grid. حيث تحدد الصف الذي يبدأ وينتهي عنده العنصر.

قبل أن نبدأ، من المهم فهم الفرق بين خطوط الشبكة (grid lines) ومسارات الشبكة (grid tracks).

خطوط الشبكة (Grid lines) هي الخطوط الفاصلة (المرقمة 1، 2، 3، إلخ) التي تشكل هيكل الشبكة (grid). مسار الشبكة (grid track) هو المساحة بين خطي شبكة متجاورين — وبشكل أساسي، هو الصف (row) أو العمود نفسه.

لنفترض أن لدينا حاوية بسيطة تحتوي على 8 عناصر، ونريد أن يمتد العنصر الأول من خط الصف 1 إلى خط الصف 4 في الشبكة:

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

هكذا يبدو:

للامتداد عبر صفوف متعددة، يمكنك أيضاً استخدام الكلمة المفتاحية span:

.item2 {
  grid-row: 2 / span 2;
  background-color: lightpink;
}

هذا يضع item2 بدءًا من row line 2 ويمتد عبر 2 rows (أو 2 tracks).

التحدي

سهل

إستخدم خاصية grid-row لجعل عنصر الـ grid الرابع يمتد من row line 2 إلى row line 4.

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: dodgerblue;
  padding: 10px;
}

.grid-container > div {
  background-color: #f1f1f1;
  text-align: center;
  padding: 10px;
  font-size: 30px;
}
/* Add your CSS styles here */

</style>
</head>
<body>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
</div>

</body>
</html>