CSS

CSS Grid Row End
خاصية grid-row-end في لغة CSS

سوف تتعلم في هذا الدرس خاصية grid-row-end في لغة CSS ووظيفيتها وكيفية استخدامها مع عناصر حاوية Grid وجميع القيم الخاصة بها.

التاريخ

15 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

730

المواضيع

24
الشروحات chevron_left CSS Grid Row End chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Grid Row End
خاصية grid-row-end في لغة CSS

</> CSS Grid Row End
خاصية grid-row-end في لغة CSS

تستخدم خاصية grid-row-end مع العناصر الداخلية لحاوية grid في لغة CSS لتحديد أي صف سوف ينتهي عنده العنصر.


قيم خاصية grid-row-end في لغة CSS:

  • auto هي القيمة الأفتراضية ويتم عرض العناصر تلقائياً وفقاً لوضعة داخل حاوية grid.
  • span تحديد عدد الصفوف أو عدد المربعات بشكل رأسي التي سوف يقوم بحجزها العنصر نسبة لحجم الصفوف الأخري وينتهي عند صف أو خلية معينه.
  • row-line تحديد يبدأ عرض العنصر ينتهي عند رقم line الخط الموجود بعد كل صف.
CSS grid-row-end syntax

طريقة كتابة خاصية grid-row-end في لغة CSS.

grid-row-end:value;
CSS grid-row-end values

قيم خاصية grid-row-end في لغة CSS.

grid-row-end:auto|span number|row-line;

</> CSS grid row end auto
خاصية grid-row-end مع القيمة auto في لغة CSS

تستخدم خاصية grid-row-end في لغة CSS والقيمة auto ليتم عرض العناصر تلقائياً وفقاً لوضعة داخل حاوية grid وهي القيمة الأفتراضية.
CSS grid row end auto

خاصية grid-row-end مع القيمة auto في لغة CSS.

.one
{
grid-row-end:auto;
}

</> CSS grid row end span
خاصية grid-row-end مع القيمة span في لغة CSS

تستخدم خاصية grid-row-end في لغة CSS والقيمة auto ليتم تحديد عدد الصفوف أو عدد المربعات بشكل رأسي التي سوف يقوم بحجزها العنصر نسبة لحجم الصفوف الأخري وينتهي عند صف أو خلية معينه.
CSS grid row end span

خاصية grid-row-end مع القيمة span في لغة CSS.

.one
{
grid-row-end:span 4;
}

</> CSS grid row end row line
خاصية grid-row-end مع القيمة row line في لغة CSS

تستخدم خاصية grid-row-start في لغة CSS والقيمة row line لتحديد يبدأ عرض العنصر بداية من رقم line الخط الموجود بعد كل صف.
CSS grid row start row line

خاصية grid-row-end مع القيمة row line في لغة CSS.

.one
{
  grid-row-end:3;
}
CSS grid row start row line four

خاصية grid-row-end مع القيمة row line في لغة CSS.

.one
{
grid-row-end:4;
}
CSS grid row start and CSS grid row end

خاصية grid-row-start مع خاصية grid-row-end في لغة CSS.

.one
{
grid-row-start:1;
grid-row-end:4;
}
CSS grid row start row line minus

خاصية grid-row-start مع القيمة row line في لغة CSS.

.five
{
grid-row-end:-1;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.