CSS

CSS Grid Column
خاصية grid-column مع grid في لغة CSS

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

التاريخ

15 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1019

المواضيع

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

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

تستخدم خاصية grid-column في لغة CSS والقيمة line + span ليتم عرض العنصر بداية line محدد ويحجز مساحة 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

تستخدم خاصية grid-column في لغة CSS والقيمة line لتحديد يبدأ عرض العنصر بداية من رقم line الخط الموجود بعد كل عمود وينتهي عند عمود محدد.
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;
}
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات