الخاصية grid-gap

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

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

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

القيمة الابتدائية لكل خاصية مختصرة:
تُطبَّق على حاويات 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-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'>?;

 انظر أيضًا

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