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

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

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

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

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.

HTML 
grid-column-start:value;

CSS grid-column-start values

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

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

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

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

CSS grid column start span two

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

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

CSS grid column start span three

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

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

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

CSS grid column start line four

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

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

CSS grid column start twelve

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

HTML 
.nine
{
  grid-column-start:12;
}
جرّب بنفسك

مشاركة

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

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