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

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث
الخاصية grid-row-gap في CSS تُحدِّد المسافة التي تفصل بين الأسطر في حاوية gird.
/* <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;
القيمة الابتدائية 0
تُطبَّق على حاويات gird.
قابلة للوراثة لا
قابلة للتحريك نعم
القيمة المحسوبة نسبة مئوية أو طول مطلق.

أمثلة

مثال عن استخدام grid-row-gap لإضافة فراغ فاصل بين الأسطر في حاوية grid:
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>
شيفرة 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;
}

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

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

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

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

تقبل الخاصية grid-row-gap إحدى القيمتين التاليتين.

القيمة <length>

عرض المسافة الفاصلة بين الأسطر.

القيمة <percentage>

عرض المسافة الفاصلة بين الأسطر نسبةً إلى أبعاد العنصر الحاوي.

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

grid-row-gap: <length-percentage>;
حيث:
<length-percentage> = <length> | <percentage>

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