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

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

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

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

القيمة الابتدائية auto
تُطبَّق على عناصر 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;

أمثلة

مثال عن استخدام 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> ] ]

 انظر أيضًا

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