شرح صفوف ومحتوى الفقرة
بدلاً من كتابة خاصيتين منفصلتين لضبط المسافات الرأسية والأفقية داخل حاوية CSS Grid، يتيح لك الاختصار القياسي الحديث gap التحكم في فجوتي الصفوف والأعمدة معاً في سطر واحد أنيق ومقروء.
ظهر هذا الاختصار في بدايات الشبكة بالاسم grid-gap، ثم اعتمدته المواصفات القياسية بالاسم الموحد الأقصر gap ليعمل في كل من CSS Grid و Flexbox، مع احتفاظ المتصفحات بدعم grid-gap كمرادف توافقي للمشاريع السابقة:
CSS
.card-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/* Legacy alias: grid-gap: 20px; */
gap: 20px;
}