شرح صفوف ومحتوى الفقرة
يدعم اختصار gap صيغتين مرنتين بحسب تصميم الشبكة المطلوب:
- قيمة واحدة موحدة — مثل
gap: 20px، فتُطبَّق المسافة20pxبالتساوي بين الصفوف وبين الأعمدة معاً. - قيمتان مفصولتان بمسافة — مثل
gap: 24px 14px، حيث تضبط القيمة الأولىrow-gapعلى24pxوتضبط القيمة الثانيةcolumn-gapعلى14px.
تذكّر دائماً القاعدة الثابتة في الشبكات: الصفوف تأتي أولاً ثم الأعمدة ثانياً، كما يبين المخطط والمثال التاليان:
CSS
.gallery-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/* 24px row-gap, 14px column-gap */
gap: 24px 14px;
}