عرض مصدر CSS/grid-column-gap

<noinclude>{{DISPLAYTITLE:الخاصية <code>grid-column-gap</code>}}</noinclude>
الخاصية <code>grid-column-gap</code> في CSS تُحدِّد المسافة التي تفصل بين الأعمدة في حاوية gird.

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>0</code>
|-
! scope="row" |تُطبَّق على
|حاويات gird.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|نعم
|-
! scope="row" |القيمة المحسوبة
|نسبة مئوية أو طول مطلق.

|}

<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>

== أمثلة ==
مثال عن استخدام <code>grid-column-gap</code> لإضافة فراغ فاصل بين الأعمدة في حاوية grid:<syntaxhighlight lang="css">
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="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;
}
</syntaxhighlight>
== دعم المتصفحات ==

{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
!الدعم الأساسي
|57.0
|52.0
|10 (مع السابقة <code>-ms-</code>)
|44
|10.1
|}
الإصدارات القديمة من متصفح Edge كانت تدعم تخطيط Grid دعمًا جزئيًا (كما في متصفح IE)، لكن الإصدار Edge 16 أصبح يدعم تخطيط Gird دعمًا كاملًا.

== البنية العامة ==
تقبل الخاصية <code>grid-column-gap</code> إحدى القيمتين التاليتين.
===  <code>[[CSS/length|<length>]]</code> ===
عرض المسافة الفاصلة بين الأعمدة.

===  <code>[[CSS/percentage|<percentage>]]</code> ===
عرض المسافة الفاصلة بين الأعمدة نسبةً إلى أبعاد العنصر الحاوي.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
grid-column-gap: <length-percentage>;
</syntaxhighlight>حيث:<syntaxhighlight lang="css">
<length-percentage> = <length> | <percentage>
</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]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Grid|{{SUBPAGENAME}}]]