CSS Grid Row Start
خاصية grid-row-start في لغة CSS
سوف تتعلم في هذا الدرس خاصية grid-row-start في لغة CSS ووظيفيتها وكيفية استخدامها مع عناصر حاوية Grid وجميع القيم الخاصة بها.
التاريخ
15 نوفمبر 2022
الدروس
137
المستوى
مبتدئ
اللغة
انجليزي
المشاهدات
861
المواضيع
24
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; }