خصائص grid-gap CSS

التعريف والاستخدام

خصائص grid-gap تعرف حجم الفجوة بين الصف والعمود في ترتيب الشبكة، وهي اختصار للخصائص التالية:

ملاحظة:تم تغيير هذا الخصائص في CSS3 إلى الفرق.

يرجى الرجوع أيضًا إلى:

دليل CSSترتيب الشبكة CSS

دليل CSSخصائص grip-row-gap

دليل CSSخصائص grip-column-gap

مثال

مثال 1

ضبط اختصار الفجوة بين الصف والعمود إلى 50 بكسل:

.grid-container {
  grid-gap: 50px;
}

جرب بنفسك

مثال 2

ضبط فجوة الصف إلى 20 بكسل، فجوة العمود إلى 50 بكسل:

.grid-container {
  grid-gap: 20px 50px;
}

جرب بنفسك

نحوية CSS

grid-gap: grid-row-gap grid-column-gap;

قيمة الخاصية

القيمة الوصف
grid-row-gap ضبط حجم الفجوة بين الصفوف في ترتيب الشبكة. القيمة الافتراضية هي 0.
grid-column-gap ضبط حجم الفجوة بين الأعمدة. القيمة الافتراضية هي 0.

تفاصيل تقنية

القيمة الافتراضية: 0 0
الوراثة: لا
صنع التحرك: يدعم. يرجى الرجوع إلى:خصائص متعلقة بالتحرك.
الإصدار: مستوى 1 لمodule CSS Grid Layout
جافا سكربت نحوية: object.style.gridGap="50px 100px"

دعم المتصفح

الرقم في الجدول يوضح إصدار المتصفح الأوائل الذي يدعم هذه الخاصية بالكامل.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44