CSS

CSS Grid Column Start
خاصية grid-column-start في لغة CSS

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

التاريخ

11 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

719

المواضيع

24
الشروحات chevron_left CSS Grid Column Start chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Grid Column Start
خاصية grid-column-start في لغة CSS

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

تستخدم خاصية grid-column-start مع العناصر الداخلية لحاوية grid في لغة CSS لعرض العنصر في موضع معين يبدا من خط أو من عمود معين فيمكن اول عنصر يبدأ من تاني عمود أو تاني خط أو يحجز مساحة عمود أو أكثر.


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.one
{
  grid-column-start:span 2;
}
CSS grid column start span three

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

.nine
{
  grid-column-start:span 3;
}

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

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

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

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

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

.one
{
 grid-column-start:4;
}
CSS grid column start twelve

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

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

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.