عرض مصدر CSS/grid-row-gap

<noinclude>{{DISPLAYTITLE:الخاصية <code>grid-row-gap</code>}}</noinclude>
الخاصية <code>grid-row-gap</code> في CSS تُحدِّد المسافة التي تفصل بين الأسطر في حاوية gird.

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>0</code>
|-
! scope="row" |تُطبَّق على
|حاويات gird.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|نعم
|-
! scope="row" |القيمة المحسوبة
|نسبة مئوية أو طول مطلق.

|}

<syntaxhighlight lang="css">
/* <length> القيم الطولية */
grid-row-gap: 20px;
grid-row-gap: 1em;
grid-row-gap: 3vmin;
grid-row-gap: 0.5cm;

/* <percentage> النسب المئوية */
grid-row-gap: 10%;

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

== أمثلة ==
مثال عن استخدام <code>grid-row-gap</code> لإضافة فراغ فاصل بين الأسطر في حاوية grid:<syntaxhighlight lang="css">
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 200px;
  grid-template-rows: repeat(3, 1fr);
  grid-row-gap: 20px;
}

#grid > div {
  background-color: lime;
}
</syntaxhighlight>
== دعم المتصفحات ==

{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
!الدعم الأساسي
|57.0
|52.0
|10 (مع السابقة <code>-ms-</code>)
|44
|10.1
|}
الإصدارات القديمة من متصفح Edge كانت تدعم تخطيط Grid دعمًا جزئيًا (كما في متصفح IE)، لكن الإصدار Edge 16 أصبح يدعم تخطيط Gird دعمًا كاملًا.

== البنية العامة ==
تقبل الخاصية <code>grid-row-gap</code> إحدى القيمتين التاليتين.
===  <code>[[CSS/length|<length>]]</code> ===
عرض المسافة الفاصلة بين الأسطر.

===  <code>[[CSS/percentage|<percentage>]]</code> ===
عرض المسافة الفاصلة بين الأسطر نسبةً إلى أبعاد العنصر الحاوي.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
grid-row-gap: <length-percentage>;
</syntaxhighlight>حيث:<syntaxhighlight lang="css">
<length-percentage> = <length> | <percentage>

</syntaxhighlight>

== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-grid/#propdef-grid-row-gap CSS Grid Layout]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Grid|{{SUBPAGENAME}}]]