الفرق بين المراجعتين ل"CSS/grid-column-gap"

المراجعة الحالية بتاريخ 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.

@@ سطر 94: / سطر 94: @@
 ==  انظر أيضًا ==
 *صفحة الخاصية <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-]][[CSS/grid-column-start|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-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>.
 ==مصادر ومواصفات==