الخاصية grid-gap
الخاصية 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'>?;
مصادر ومواصفات
- مواصفة CSS Grid Layout.