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

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

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

قبل أن نتعمّق، من المهم فهم الفرق بين خطوط grid ومسارات grid.

خطوط الشبكة هي الخطوط الفاصلة (المرقمة 1 و2 و3 وما إلى ذلك) التي تشكّل بنية الشبكة. ومسار الشبكة هو المساحة بين خطَّي شبكة متجاورين: أي الصف أو العمود نفسه بشكل أساسي.

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

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

إليك كيف يبدو:

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

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

يضع هذا item2 بدءًا من row line 2 ويمتد عبر صفَّين (أو مسارين 2).

التحدي

سهل

استخدم الخاصية grid-row لجعل grid item الرابع يمتد من 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>