CSS/grid-gap

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

بطاقة الخاصية

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

/* <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-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'>?;

 انظر أيضًا

• صفحة الخاصية grid-auto والخاصيات الفرعية منها وهي: grid-auto-rows و grid-auto-columns و grid-auto-flow.
• صفحة الخاصية grid-column والخاصيات الفرعية منها وهي: grid-column-start و grid-column-end و grid-column-gap.
• صفحة الخاصية grid-row والخاصيات الفرعية منها وهي: grid-row-start و grid-row-end و grid-row-gap.

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

• مواصفة CSS Grid Layout.