71. فجوات الشبكة (التباعد بين المسارات)

بشكل مشابه لـ Flexbox، يستخدم CSS Grid خصائص gap لتعريف التباعد بين مسارات الشبكة (الأعمدة والصفوف)، مما يلغي الحاجة إلى حسابات هوامش معقدة على عناصر الشبكة.

خصائص الفجوة

1. column-gap: مساحة بين الأعمدة (الخطوط الرأسية).
2. row-gap: مساحة بين الصفوف (الخطوط الأفقية).
3. gap (اختصار): يضبط كلاً من row-gap و column-gap.

مثال

css .grid-container { display: grid; grid-template-columns: repeat(3, 1fr);

/* 1. ضبط الفجوات الفردية */ row-gap: 20px; column-gap: 15px;

/* 2. الاختصار (يُفضل للتباعد المتساوي) / / gap: 20px; */

/* 3. الاختصار (صف، عمود) / / gap: 20px 15px; */ }

ميزة رئيسية: على عكس الهوامش (margins)، فإن تباعد gap يكون دائماً داخلياً للحاوية ولا يتسرب للخارج أبداً ولا يسبب انهيار الهامش، مما يجعل التباعد قابلاً للتنبؤ به للغاية.