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

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

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

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

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

هذا هو الشكل الذي يبدو عليه:

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

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

هذا يضع item2 بدءًا من خط الصف 2 ويمتد عبر صفين.

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

التحدي

سهل

استخدم خاصية grid-row لجعل عنصر الشبكة الرابع يمتد من خط الصف 2 إلى خط الصف 4.

ورقة مرجعية

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

الصيغة الأساسية:

.item {
  grid-row: start-line / end-line;
}

مثال يمتد من خط الصف 1 إلى خط الصف 4:

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

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

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

جرّب بنفسك

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

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.