الخاصية grid-gap

الخاصية grid-gap في CSS هي خاصيةٌ مختصرةٌ تضبط قيمة الخاصيتين grid-row-gap و grid-column-gap، وهي تُحدِّد المسافة التي تفصل بين الأسطر والأعمدة في حاوية gird.

/* <length> القيم الطولية */
grid-gap: 20px;
grid-gap: 1em;
grid-gap: 3vmin;
grid-gap: 0.5cm;

/* <percentage> النسب المئوية */
grid-gap: 10%;

/* <length> قيمتان طوليتان */
grid-gap: 20px 10px;
grid-gap: 1em 0.5em;
grid-gap: 3vmin 2vmax;
grid-gap: 0.5cm 2mm;

/* <percentage> نسبتان مئويتان */
grid-gap: 16% 100%;
grid-gap: 21px 82%;

/* القيم العامة */
grid-gap: inherit;
grid-gap: initial;
grid-gap: unset;

القيمة الابتدائية	لكل خاصية مختصرة: grid-row-gap: 0 grid-column-gap: 0
تُطبَّق على	حاويات gird.
قابلة للوراثة	لا
قابلة للتحريك	نعم
القيمة المحسوبة	لكل خاصية مختصرة: grid-row-gap: نسبة مئوية أو طول مطلق. grid-column-gap: نسبة مئوية أو طول مطلق.

أمثلة

مثال عن استخدام grid-gap لإضافة فراغ فاصل بين الأسطر (20px) والأعمدة (5px) في حاوية grid:

<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

شيفرة CSS:

#grid {
  display: grid;
  height: 200px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  grid-gap: 20px 5px;
}

#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-row-gap قيمةً واحدةً أو قيمتين، فلو حددنا قيمةً واحدةً فهي تضبط الخاصية grid-row-gap والخاصية grid-column-gap، وإذا حددنا قيمتين فستكون أوّل قيمة هي قيمة الخاصية grid-row-gap والقيمة الثانية هي قيمة grid-column-gap. وكلٌ واحدةٍ منهما تقبل إحدى القيمتين التاليتين.

القيمة <length>

عرض المسافة الفاصلة بين الأسطر أو الأعمدة.

القيمة <percentage>

عرض المسافة الفاصلة بين الأسطر أو الأعمدة نسبةً إلى أبعاد العنصر الحاوي.

البنية الرسمية

grid-gap: <'grid-row-gap'> <'grid-column-gap'>?;

مصادر ومواصفات

• مواصفة CSS Grid Layout.