الفرق بين المراجعتين ل"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> === |
عرض المسافة الفاصلة بين الأعمدة نسبةً إلى أبعاد العنصر الحاوي. | عرض المسافة الفاصلة بين الأعمدة نسبةً إلى أبعاد العنصر الحاوي. | ||
| سطر 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|{{SUBPAGENAME}}]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property|{{SUBPAGENAME}}]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Grid|{{SUBPAGENAME}}]] | [[تصنيف: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.