في هذا الدرس 5تصفّح المواضيع
بدلاً من كتابة خاصيتين منفصلتين لضبط المسافات الرأسية والأفقية داخل حاوية CSS Grid، يتيح لك الاختصار القياسي الحديث gap التحكم في فجوتي الصفوف والأعمدة معاً في سطر واحد أنيق ومقروء.
ظهر هذا الاختصار في بدايات الشبكة بالاسم grid-gap، ثم اعتمدته المواصفات القياسية بالاسم الموحد الأقصر gap ليعمل في كل من CSS Grid و Flexbox، مع احتفاظ المتصفحات بدعم grid-gap كمرادف توافقي للمشاريع السابقة:
.card-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/* Legacy alias: grid-gap: 20px; */
gap: 20px;
}يدعم اختصار gap صيغتين مرنتين بحسب تصميم الشبكة المطلوب:
- قيمة واحدة موحدة — مثل
gap: 20px، فتُطبَّق المسافة20pxبالتساوي بين الصفوف وبين الأعمدة معاً. - قيمتان مفصولتان بمسافة — مثل
gap: 24px 14px، حيث تضبط القيمة الأولىrow-gapعلى24pxوتضبط القيمة الثانيةcolumn-gapعلى14px.
تذكّر دائماً القاعدة الثابتة في الشبكات: الصفوف تأتي أولاً ثم الأعمدة ثانياً، كما يبين المخطط والمثال التاليان:
.gallery-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/* 24px row-gap, 14px column-gap */
gap: 24px 14px;
}ينطبق على gap ما ينطبق على سائر الاختصارات في CSS: عند تمرير قيمة مفردة مثل gap: 12px بعد قاعدة سابقة حددت column-gap: 32px، فإن المتصفح يعيد ضبط column-gap أيضاً إلى 12px فيمسح التباعد العريض للأعمدة دون قصد.
لذلك إذا أردت تعديل فجوة الصفوف وحدها مع الحفاظ على تباعد الأعمدة القائم، استخدم الخاصية المفردة row-gap بدلاً من الاختصار الشامل gap. اختبر هذا الفخ عملياً في المختبر التفاعلي التالي:
تقوم شبكات البطاقات الاحترافية على توزيع واضح للأدوار: تتولى خاصية gap ضبط الفواصل الداخلية بين البطاقات المتجاورة، بينما تتولى خاصية padding على الحاوية نفسها إنشاء الإطار الداخلي المحيط بالشبكة من جوانبها الأربعة.
على عكس وضع margin: 8px لكل بطاقة—والذي ينتج مسافة مضاعفة قدرها 16px بين البطاقات مقابل 8px فقط عند الجدار—فإن الجمع بين gap: 16px و padding: 16px يمنحك توازناً هندسياً متطابقاً بلا معادلات معقدة:
.dashboard-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
padding: 16px;
}عند فحص الحاوية الشبكية في لوحة 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 المرنة.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Gap Shorthand اختصار الفجوات — gap
- الاختصار القياسي الموحد في CSS الذي يضبط فجوة الصفوف وفجوة الأعمدة معاً داخل حاويات الشبكة والصناديق المرنة.
- للمراجعة
- 02 Grid Gap Alias المرادف السابق — grid-gap
- الاسم التاريخي لاختصار فجوات الشبكة والذي تدعمه المتصفحات الحديثة كمرادف مباشر لخاصية gap القياسية.
- للمراجعة
- 03 Shorthand Implicit Reset إعادة الضبط الضمنية بالاختصار
- سلوك التتالي الذي تجعل فيه كتابة قيمة مفردة مثل gap: 16px المتصفح يعيد ضبط كل من row-gap و column-gap معاً.
- للمراجعة
- 04 Row-First Two-Value Syntax ترتيب الصفوف ثم الأعمدة
- تمرير قيمتين مفصولتين بمسافة إلى خاصية gap بحيث تحدد الأولى تباعد الصفوف وتحدد الثانية تباعد الأعمدة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 W3C W3C
- World Wide Web Consortium
- اتحاد شبكة الويب العالمية الذي وحّد خاصية grid-gap تحت الاسم القياسي المشترك gap في مواصفة المحاذاة.
- للمراجعة
- 02 CSS CSS
- Cascading Style Sheets
- لغة الأنماط المتتالية المسؤولة عن تفكيك الاختصارات وترتيب الأولوية وضبط فواصل الشبكات ثنائية الأبعاد.
- للمراجعة
- 03 UI UI
- User Interface
- طبقة واجهة المستخدم المرئية التي يمنحها الجمع المتوازن بين gap و padding انتظاماً وسهولة في القراءة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
ابنِ شبكة من 3 أعمدة تضم 6 بطاقات وطبّق عليها gap: 28px 12px ليكون تباعد الصفوف 28px وتباعد الأعمدة 12px.
-
اجمع بين gap: 16px و padding: 16px على حاوية شبكية من عمودين دون هوامش على العناصر، ثم وسّع خاصية gap في لوحة Styles بأدوات المطور.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.