شرح صفوف ومحتوى الفقرة
عند فحص الحاوية الشبكية في لوحة Styles بأدوات المطور، يمكنك النقر على السهم الصغير بجوار خاصية gap: 24px 14px لتوسيع الاختصار والتحقق فوراً من القيمة المحسوبة لكل من row-gap و column-gap كلّاً على حدة.
يلخص الجدول المرجعي التالي جميع صيغ الاختصار gap وسلوكها داخل الشبكات:
| صيغة الكتابة | الخصائص الفرعية المكافئة | النتيجة في تخطيط الشبكة |
|---|---|---|
gap: normal; | row-gap: normal; column-gap: normal; | تباعد صفري افتراضي بين الصفوف والأعمدة معاً |
gap: 20px; | row-gap: 20px; column-gap: 20px; | تباعد متساوٍ قدره 20px على المحورين |
gap: 24px 12px; | row-gap: 24px; column-gap: 12px; | تحديد فجوة الصفوف أولاً ثم فجوة الأعمدة ثانياً |
grid-gap: 20px; | row-gap: 20px; column-gap: 20px; | مرادف توافقي قديم يؤدي نفس عمل gap الحديثة |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
في ملخص الدرس أتقنت استخدام اختصار gap ومرادفه grid-gap بصيغتي القيمة الواحدة والقيمتين وتجنب فخ إعادة الضبط الضمني وتكامله مع الحشوات. في الخطوة التالية ننتقل إلى درس خاصية grid-column-gap مع Grid في لغة CSS للتعمق في فواصل الأعمدة وتكاملها مع مسارات fr المرنة.