فقرة فرعية #2 من درس: خاصية grid-row مع Grid في لغة CSS

Grid Row Line Placement التموضع الرأسي وملء كامل الطول

ادمج خط البداية العلوي وخط النهاية السفلي في سطر واحد مختصر عبر خاصية grid-row لبناء قوائم جانبية بكامل الارتفاع وبطاقات ممتدة بعدة صفوف وتموضع دقيق ثنائي الأبعاد.

2 صفوف تعليمية

لغة CSS

2,573 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يبرز نمطان عمليان لاختصار الخطوط في أغلب لوحات التحكم والمجلات الرقمية الحديثة:

حصر العنصر بين خطين — grid-row: 1 / 3: يثبّت العنصر من الخط الأفقي الأول حتى الثالث ليغطي أول صفين بدقة.
ملء كامل الارتفاع الصريح — grid-row: 1 / -1: يمد القائمة الجانبية من قمة الشبكة حتى آخر خط سفلي صريح بسطر واحد نظيف ومقروء.

الصف 2 كود برمجي

CSS

.tall-sidebar {
  grid-row: 1 / -1;
  background-color: #261f36;
  color: #ffffff;
}

جرّب بنفسك

Grid Row Line Placement التموضع الرأسي وملء كامل الطول

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (خاصية grid-row مع Grid في لغة CSS)