الخاصية grid-column-start

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

بطاقة الخاصية

القيمة الابتدائية	auto
تُطبَّق على	عناصر grid الموجودة داخل حاويات grid.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت

/* كلمة محجوزة */
grid-column-start: auto;

/* <custom-ident> */
grid-column-start: somegridarea;

/* <integer> + <custom-ident> */
grid-column-start: 2;
grid-column-start: somegridarea 4;

/* span + <integer> + <custom-ident> */
grid-column-start: span 3;
grid-column-start: span somegridarea;
grid-column-start: 5 somegridarea span;

/* القيم العامة */
grid-column-start: inherit;
grid-column-start: initial;
grid-column-start: unset;

أمثلة

مثال عن استخدام grid-column-start لجعل أحد عناصر grid يمتد على أكثر من عمود:

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

شيفرة CSS:

#grid {
  display: grid;
  height: 200px;
  grid-template: 200px / repeat(4, 1fr);
}

#item1 {
  background-color: lime;
  grid-column-start: span 2;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	57.0	52.0	10 (مع السابقة -ms-)	44	10.1

الإصدارات القديمة من متصفح Edge كانت تدعم تخطيط Grid دعمًا جزئيًا (كما في متصفح IE)، لكن الإصدار Edge 16 أصبح يدعم تخطيط Gird دعمًا كاملًا.

البنية العامة

تقبل الخاصية grid-column-start قيمةً واحدةً هي <grid-line>، و <grid-line> تُحدِّد كما يلي:

• الكلمة المحجوزة auto
• أو <custom-ident>
• أو عدد صحيح <integer>
• أو <custom-ident> وعدد صحيح <integer> يُفصَل بينهما بفراغ
• أو الكلمة المحجوزة span مع <custom-ident> أو عدد صحيح <integer> أو كلاهما.

auto

تُشير هذه الكلمة المحجوزة إلى أنَّ هذه الخاصية لن تُساهم في تحديد موضع عنصر grid.

<custom-ident>

إذا كان هنالك سطرٌ له الاسم ‎<custom-ident>-start فستساهم هذه القيمة في تحديد موضع عنصر grid في ذاك العمود.

ملاحظة: المناطق المسماة (grid areas) ستولد -ضمنيًا- أسماء أعمدة لها هذا الشكل، فلو ضبطنا قيمة هذه الخاصية إلى foo، فسيبدأ العنصر من حافة المنطقة المسماة (ما لم يكن هنالك عمودٌ آخر باسم foo-start حُدِّدَ اسمه بوضوح قبل تعريف هذه المنطقة).

‎<integer> && <custom-ident>? ‎

تحديد موضع عنصر grid حسب العدد الصحيح <integer> نسبةً إلى العمود؛ وإذا كانت قيمة العدد الصحيح سالبةً فسيبدأ العد بالمقلوب، أي بدءًا من حافة النهاية للشبكة. لا يجوز أن تكون قيمة العدد الصحيح مساويةً للصفر.

span && [ <integer> || <custom-ident> ] ‎

تحديد موضع عنصر grid حسب العدد الصحيح <integer> نسبةً إلى العمود وبدءًا من حافة النهاية، ولا يجوز أن تكون قيمة العدد الصحيح مساويةً للصفر، ولا يجوز أن تكون <custom-ident> تساوي span.

البنية الرسمية

grid-column-start: <grid-line>;

حيث:

<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

مصادر ومواصفات

• مواصفة CSS Grid Layout.