CSS Grid Column
خاصية grid-column مع grid في لغة CSS
سوف تتعلم في هذا الدرس خاصية grid-column في لغة CSS ووظيفيتها وكيفية استخدامها مع عناصر حاوية Grid وجميع القيم الخاصة بها.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Grid Column
خاصية grid-column مع grid في لغة CSS
</>
CSS Grid Column
خاصية grid-column مع grid في لغة CSS
تستخدم خاصية grid-column مع العناصر الداخلية لحاوية grid في لغة CSS للأختصار وكتابة خاصية واحدة بدلاً من خاصيتين وهما [grid-column-start,grid-column-end].
قيم خاصية grid-column في لغة CSS:
- span start / span end تحديد عدد الصفوف أو عدد المربعات بشكل رأسي التي سوف يقوم بحجزها العنصر نسبة لحجم الصفوف الأخري وينتهي عند صف أو خلية معينه بداية + نهاية.
- column-line strat / column-line end تحديد يبدأ عرض العنصر من 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 Column span start and end
خاصية grid-column ليبدأ وينتهي بحجم span في لغة CSS
CSS grid row end auto
خاصية grid-row-end مع القيمة auto في لغة CSS.
.one
{
grid-column:1 / span 4;
}
</>
CSS Grid Column line start and end
خاصية grid-column مع القيمة line في لغة CSS
CSS Grid Column line start and end
خاصية grid-row-end مع القيمة row line في لغة CSS.
.one
{
grid-column:1 / 4;
}
CSS grid column start three
خاصية grid-column مع القيمة line في لغة CSS.
.one
{
grid-column:3 / 5;
}
CSS grid column with minus
خاصية grid-column مع القيمة line سالبة في لغة CSS.
.five
{
grid-column:2 / -1;
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
