CSS/grid-row

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

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

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

/* كلمات محجوزة */
grid-row: auto;
grid-row: auto / auto;

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

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

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

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

إذا حُدِّد قيمتَي <grid-line> فستُضبَط قيمة الخاصية grid-row-start قبل الشرطة المائلة /، وقيمة الخاصية grid-row-end بعد الشرطة المائلة.

أمثلة

مثال عن استخدام grid-row لجعل عنصر grid الثاني يمتد بدءًا من خط السطر الثاني وانتهاءً بخط السطر الرابع، وجعل عنصر grid الثالث يمتد على سطرين على أن تكون نهايته عند خط السطر السابع. لاحظ استخدام الدالة repeat()‎ مع الخاصية grid-template-rows:

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

شيفرة CSS:

#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 200px;
  grid-template-rows: repeat(6, 1fr);
}

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-row: 2 / 4;
}

#item3 {
  background-color: blue;
  grid-row: span 2 / 7;
}

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

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

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

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

تقبل الخاصية grid-row قيمةً واحدةً أو قيمتين هما <grid-line>. إذا حُدِّدَت قيمةٌ واحدة فهي الخاصية grid-row-start، وإذا حُدِّدَت قيمتان فستؤديان إلى ضبط الخاصية grid-row-start و grid-row-end على التوالي، ويُفصَل بين القيمتين بشرطة مائلة /.

<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-row: <grid-line> [ / <grid-line> ]?;

حيث:

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

 انظر أيضًا

• صفحة الخاصية grid-auto والخاصيات الفرعية منها وهي: grid-auto-rows و grid-auto-columns و grid-auto-flow.
• صفحة الخاصية grid-column والخاصيات الفرعية منها وهي: grid-column-start و grid-column-end و grid-column-gap.
• صفحة الخاصية grid-row والخاصيات الفرعية منها وهي: grid-row-start و grid-row-end و grid-row-gap.

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

• مواصفة CSS Grid Layout.