CSS

CSS Grid Row Start
خاصية grid-row-start في لغة CSS

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

التاريخ

15 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

909

المواضيع

24
الشروحات chevron_left CSS Grid Row Start chevron_left CSS

CSS Grid Row Start
خاصية grid-row-start في لغة CSS

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

.one
{
grid-row-start:span 2;
}

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

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

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

.one
{
grid-row-start:2;
}
CSS grid row start row line three

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

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

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

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