الخاصية grid-row-gap
< CSS
اذهب إلى التنقل
اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
الخاصية grid-row-gap
في CSS تُحدِّد المسافة التي تفصل بين الأسطر في حاوية gird.
بطاقة الخاصية
القيمة الابتدائية | 0
|
---|---|
تُطبَّق على | حاويات 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;
أمثلة
مثال عن استخدام 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>
انظر أيضًا
- صفحة الخاصية
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
.
مصادر ومواصفات
- مواصفة CSS Grid Layout.