CSS

CSS Grid Column End
خاصية grid-column-end في لغة CSS

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

التاريخ

11 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

930

المواضيع

24
الشروحات chevron_left CSS Grid Column End chevron_left CSS

CSS Grid Column End
خاصية grid-column-end في لغة CSS

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

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


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

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

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

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

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

grid-column-end:auto|span|column-line;

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

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

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

.one
{
grid-column-start:auto;
grid-column-end:auto;
}

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

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

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

.one
{
  grid-column-end:span 4;
}
CSS grid column end span two

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

.one
{
  grid-column-end:span 2;
}

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

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

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

.one
{
  grid-column-start:2;
  grid-column-end:5;
}
CSS grid column end line four

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

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