الفرق بين المراجعتين لصفحة: «CSS/grid-gap»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>grid-gap</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>grid-gap</code>}}</noinclude> | ||
الخاصية <code>grid-gap</code> في CSS هي خاصيةٌ مختصرةٌ تضبط قيمة الخاصيتين <code>[[CSS/grid-row-gap|grid-row-gap]]</code> و <code>[[CSS/grid-column-gap|grid-column-gap]]</code>، وهي تُحدِّد المسافة التي تفصل بين الأسطر والأعمدة في حاوية gird.<syntaxhighlight lang="css"> | الخاصية <code>grid-gap</code> في CSS هي خاصيةٌ مختصرةٌ تضبط قيمة الخاصيتين <code>[[CSS/grid-row-gap|grid-row-gap]]</code> و <code>[[CSS/grid-column-gap|grid-column-gap]]</code>، وهي تُحدِّد المسافة التي تفصل بين الأسطر والأعمدة في حاوية gird. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | |||
|- | |||
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]] | |||
|لكل خاصية مختصرة: | |||
* <code>[[CSS/grid-row-gap|grid-row-gap]]</code>: <code>0</code> | |||
* <code>[[CSS/grid-column-gap|grid-column-gap]]</code>: <code>0</code> | |||
|- | |||
! scope="row" |تُطبَّق على | |||
|حاويات gird. | |||
|- | |||
! scope="row" |قابلة للوراثة | |||
|لا | |||
|- | |||
!قابلة للتحريك | |||
|نعم | |||
|- | |||
! scope="row" |القيمة المحسوبة | |||
|لكل خاصية مختصرة: | |||
* <code>[[CSS/grid-row-gap|grid-row-gap]]</code>: نسبة مئوية أو طول مطلق. | |||
* <code>[[CSS/grid-column-gap|grid-column-gap]]</code>: نسبة مئوية أو طول مطلق. | |||
|} | |||
<syntaxhighlight lang="css"> | |||
/* <length> القيم الطولية */ | /* <length> القيم الطولية */ | ||
grid-gap: 20px; | grid-gap: 20px; | ||
| سطر 25: | سطر 51: | ||
grid-gap: unset; | grid-gap: unset; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== أمثلة == | == أمثلة == | ||
| سطر 95: | سطر 99: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>grid-row-gap</code> قيمةً واحدةً أو قيمتين، فلو حددنا قيمةً واحدةً فهي تضبط الخاصية <code>[[CSS/grid-row-gap|grid-row-gap]]</code> والخاصية <code>[[CSS/grid-column-gap|grid-column-gap]]</code>، وإذا حددنا قيمتين فستكون أوّل قيمة هي | تقبل الخاصية <code>grid-row-gap</code> قيمةً واحدةً أو قيمتين، فلو حددنا قيمةً واحدةً فهي تضبط الخاصية <code>[[CSS/grid-row-gap|grid-row-gap]]</code> والخاصية <code>[[CSS/grid-column-gap|grid-column-gap]]</code>، وإذا حددنا قيمتين فستكون أوّل قيمة هي الخاصية <code>[[CSS/grid-row-gap|grid-row-gap]]</code> والقيمة الثانية هي <code>[[CSS/grid-column-gap|grid-column-gap]]</code>. وكلٌ واحدةٍ منهما تقبل إحدى القيمتين التاليتين. | ||
=== | === <code>[[CSS/length|<length>]]</code> === | ||
عرض المسافة الفاصلة بين الأسطر أو الأعمدة. | عرض المسافة الفاصلة بين الأسطر أو الأعمدة. | ||
=== | === <code>[[CSS/percentage|<percentage>]]</code> === | ||
عرض المسافة الفاصلة بين الأسطر أو الأعمدة نسبةً إلى أبعاد العنصر الحاوي. | عرض المسافة الفاصلة بين الأسطر أو الأعمدة نسبةً إلى أبعاد العنصر الحاوي. | ||
مراجعة 08:34، 4 سبتمبر 2018
الخاصية grid-gap في CSS هي خاصيةٌ مختصرةٌ تضبط قيمة الخاصيتين grid-row-gap و grid-column-gap، وهي تُحدِّد المسافة التي تفصل بين الأسطر والأعمدة في حاوية gird.
بطاقة الخاصية
| القيمة الابتدائية | لكل خاصية مختصرة:
|
|---|---|
| تُطبَّق على | حاويات gird. |
| قابلة للوراثة | لا |
| قابلة للتحريك | نعم |
| القيمة المحسوبة | لكل خاصية مختصرة:
|
/* <length> القيم الطولية */
grid-gap: 20px;
grid-gap: 1em;
grid-gap: 3vmin;
grid-gap: 0.5cm;
/* <percentage> النسب المئوية */
grid-gap: 10%;
/* <length> قيمتان طوليتان */
grid-gap: 20px 10px;
grid-gap: 1em 0.5em;
grid-gap: 3vmin 2vmax;
grid-gap: 0.5cm 2mm;
/* <percentage> نسبتان مئويتان */
grid-gap: 16% 100%;
grid-gap: 21px 82%;
/* القيم العامة */
grid-gap: inherit;
grid-gap: initial;
grid-gap: unset;
أمثلة
مثال عن استخدام grid-gap لإضافة فراغ فاصل بين الأسطر (20px) والأعمدة (5px) في حاوية grid:
<div id="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
شيفرة CSS:
#grid {
display: grid;
height: 200px;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
grid-gap: 20px 5px;
}
#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 قيمةً واحدةً أو قيمتين، فلو حددنا قيمةً واحدةً فهي تضبط الخاصية grid-row-gap والخاصية grid-column-gap، وإذا حددنا قيمتين فستكون أوّل قيمة هي الخاصية grid-row-gap والقيمة الثانية هي grid-column-gap. وكلٌ واحدةٍ منهما تقبل إحدى القيمتين التاليتين.
<length>
عرض المسافة الفاصلة بين الأسطر أو الأعمدة.
<percentage>
عرض المسافة الفاصلة بين الأسطر أو الأعمدة نسبةً إلى أبعاد العنصر الحاوي.
البنية الرسمية
grid-gap: <'grid-row-gap'> <'grid-column-gap'>?;
مصادر ومواصفات
- مواصفة CSS Grid Layout.