الفرق بين المراجعتين لصفحة: «CSS/grid-column-gap»
< CSS
لا ملخص تعديل |
لا ملخص تعديل |
||
| (3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 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> === | ||
عرض المسافة الفاصلة بين الأعمدة نسبةً إلى أبعاد العنصر الحاوي. | عرض المسافة الفاصلة بين الأعمدة نسبةً إلى أبعاد العنصر الحاوي. | ||
| سطر 88: | سطر 92: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== مصادر ومواصفات == | == انظر أيضًا == | ||
*صفحة الخاصية <code>grid-auto</code> والخاصيات الفرعية منها وهي: <code>[[CSS/grid-auto-rows|grid-auto-rows]]</code> و <code>[[CSS/grid-auto-columns|grid-auto-columns]]</code> و <code>[[CSS/grid-auto-flow|grid-auto-flow]]</code>. | |||
*صفحة الخاصية <code>[[CSS/grid-column|grid-column]]</code> والخاصيات الفرعية منها وهي: <code>[[CSS/grid-column-start|grid-column-start]]</code> و <code>[[CSS/grid-column-end|grid-column-end]]</code>. | |||
*صفحة الخاصية <code>[[CSS/grid-column|grid-]][[CSS/grid-row|row]]</code> والخاصيات الفرعية منها وهي: <code>[[CSS/grid-row-start|grid-row-start]]</code> و <code>[[CSS/grid-row-end|grid-row-end]]</code> و <code>[[CSS/grid-row-gap|grid-row-gap]]</code>. | |||
==مصادر ومواصفات== | |||
* مواصفة [https://drafts.csswg.org/css-grid/#propdef-grid-column-gap CSS Grid Layout]. | * مواصفة [https://drafts.csswg.org/css-grid/#propdef-grid-column-gap CSS Grid Layout]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Grid]] | [[تصنيف:CSS Grid|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 08:09، 12 سبتمبر 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>
انظر أيضًا
- صفحة الخاصية
grid-autoوالخاصيات الفرعية منها وهي:grid-auto-rowsوgrid-auto-columnsوgrid-auto-flow. - صفحة الخاصية
grid-columnوالخاصيات الفرعية منها وهي:grid-column-startوgrid-column-end. - صفحة الخاصية
grid-rowوالخاصيات الفرعية منها وهي:grid-row-startوgrid-row-endوgrid-row-gap.
مصادر ومواصفات
- مواصفة CSS Grid Layout.