الخاصية grid-column-gap

الخاصية 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.