الفرق بين المراجعتين ل"CSS/grid-column-gap"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>grid-column-gap</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>grid-column-gap</code>}}</noinclude> | ||
| − | الخاصية <code>grid-column-gap</code> في CSS تُحدِّد المسافة التي تفصل بين الأعمدة في حاوية gird. | + | الخاصية <code>grid-column-gap</code> في CSS تُحدِّد المسافة التي تفصل بين الأعمدة في حاوية gird. |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | == بطاقة الخاصية == | |
| − | |||
| − | |||
| − | |||
| − | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 33: | سطر 21: | ||
|} | |} | ||
| + | |||
| + | <syntaxhighlight lang="css"> | ||
| + | /* <length> القيم الطولية */ | ||
| + | grid-column-gap: 20px; | ||
| + | grid-column-gap: 1em; | ||
| + | grid-column-gap: 3vmin; | ||
| + | grid-column-gap: 0.5cm; | ||
| + | |||
| + | /* <percentage> النسب المئوية */ | ||
| + | grid-column-gap: 10%; | ||
| + | |||
| + | /* القيم العامة */ | ||
| + | grid-column-gap: inherit; | ||
| + | grid-column-gap: initial; | ||
| + | grid-column-gap: unset; | ||
| + | </syntaxhighlight> | ||
== أمثلة == | == أمثلة == | ||
| سطر 75: | سطر 79: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>grid-column-gap</code> إحدى القيمتين التاليتين. | تقبل الخاصية <code>grid-column-gap</code> إحدى القيمتين التاليتين. | ||
| − | === | + | === <code>[[CSS/length|<length>]]</code> === |
عرض المسافة الفاصلة بين الأعمدة. | عرض المسافة الفاصلة بين الأعمدة. | ||
| − | === | + | === <code>[[CSS/percentage|<percentage>]]</code> === |
عرض المسافة الفاصلة بين الأعمدة نسبةً إلى أبعاد العنصر الحاوي. | عرض المسافة الفاصلة بين الأعمدة نسبةً إلى أبعاد العنصر الحاوي. | ||
مراجعة 08:29، 4 سبتمبر 2018
الخاصية grid-column-gap في CSS تُحدِّد المسافة التي تفصل بين الأعمدة في حاوية gird.
بطاقة الخاصية
| القيمة الابتدائية | 0
|
|---|---|
| تُطبَّق على | حاويات gird. |
| قابلة للوراثة | لا |
| قابلة للتحريك | نعم |
| القيمة المحسوبة | نسبة مئوية أو طول مطلق. |
/* <length> القيم الطولية */
grid-column-gap: 20px;
grid-column-gap: 1em;
grid-column-gap: 3vmin;
grid-column-gap: 0.5cm;
/* <percentage> النسب المئوية */
grid-column-gap: 10%;
/* القيم العامة */
grid-column-gap: inherit;
grid-column-gap: initial;
grid-column-gap: unset;
أمثلة
مثال عن استخدام grid-column-gap لإضافة فراغ فاصل بين الأعمدة في حاوية grid:
<div id="grid">
<div></div>
<div></div>
<div></div>
</div>
شيفرة CSS:
#grid {
display: grid;
height: 200px;
grid-template-rows: 200px;
grid-template-columns: repeat(3, 1fr);
grid-column-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-column-gap إحدى القيمتين التاليتين.
<length>
عرض المسافة الفاصلة بين الأعمدة.
<percentage>
عرض المسافة الفاصلة بين الأعمدة نسبةً إلى أبعاد العنصر الحاوي.
البنية الرسمية
grid-column-gap: <length-percentage>;
حيث:
<length-percentage> = <length> | <percentage>
مصادر ومواصفات
- مواصفة CSS Grid Layout.