الخاصية grid-row-end

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث
الخاصية grid-row-end في CSS تستعمل لضبط مكان نهاية عنصر grid ضمن سطر grid بتحديد السطر أو الامتداد أو جعل موضع العنصر تلقائيًا.
/* كلمة محجوزة */
grid-row-end: auto;

/* <custom-ident> */
grid-row-end: somegridarea;

/* <integer> + <custom-ident> */
grid-row-end: 2;
grid-row-end: somegridarea 4;

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

/* القيم العامة */
grid-row-end: inherit;
grid-row-end: initial;
grid-row-end: unset;
القيمة الابتدائية auto
تُطبَّق على عناصر grid الموجودة داخل حاويات grid.
قابلة للوراثة لا
قابلة للتحريك لا
القيمة المحسوبة كما حُدِّدَت

أمثلة

مثال عن استخدام grid-row-end لجعل أحد عناصر 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:  repeat(4, 1fr) / 200px;
}

#item1 {
  background-color: lime;
  grid-row-end: 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-row-end قيمةً واحدةً هي <grid-line>، وقيمة <grid-line> تُحدِّد كما يلي:

القيمة auto

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

القيمة <custom-ident>

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

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

القيمة‎<integer> && <custom-ident>?

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

القيمةspan && [ <integer> || <custom-ident> ]

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

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

grid-row-end: <grid-line>;
حيث:
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

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