انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 89
دورة لغة CSS

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
4
الأمثلة
7
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,809
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

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.

HTML 
grid-column-end:value;

CSS grid-column-end values

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

HTML 
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.

HTML 
.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.

HTML 
.one
{
  grid-column-end:span 4;
}
جرّب بنفسك

CSS grid column end span two

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

HTML 
.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.

HTML 
.one
{
  grid-column-start:2;
  grid-column-end:5;
}
جرّب بنفسك

CSS grid column end line four

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

HTML 
.one
{
  grid-column-start:1;
  grid-column-end:4;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…