انتقل إلى محتوى الدرس

Gap Shorthand Implicit Reset فخ القيمة المفردة باختصار الفجوات

أتقن اختصار الفجوات القياسي gap ومرادفه السابق grid-gap في شبكات CSS لضبط تباعد الصفوف والأعمدة معاً بصيغة القيمة الموحدة أو القيمتين المنفصلتين بوضوح.
3 صفوف تعليمية
لغة CSS
2,942 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

ينطبق على gap ما ينطبق على سائر الاختصارات في CSS: عند تمرير قيمة مفردة مثل gap: 12px بعد قاعدة سابقة حددت column-gap: 32px، فإن المتصفح يعيد ضبط column-gap أيضاً إلى 12px فيمسح التباعد العريض للأعمدة دون قصد.

لذلك إذا أردت تعديل فجوة الصفوف وحدها مع الحفاظ على تباعد الأعمدة القائم، استخدم الخاصية المفردة row-gap بدلاً من الاختصار الشامل gap. اختبر هذا الفخ عملياً في المختبر التفاعلي التالي:

الصف 2 معاينة حية
الصف 3 ملاحظة هامة