**gap** (كان يُعرَّف سابقاً بـ grid-gap) يتيح تعريف المسافات بين عناصر Flex وGrid بطريقة نظيفة.
**المزايا على margin:** - يُضيف مسافة **بين** العناصر فقط — لا قبل الأول ولا بعد الأخير. - لا تحتاج لـ :first-child أو :last-child للتعديل. - يعمل مع كلٍّ من Flexbox وGrid.
**الخصائص:** - `gap` — قيمة واحدة لكل الاتجاهات، أو قيمتان: row-gap column-gap - `row-gap` — المسافة العمودية بين الصفوف - `column-gap` — المسافة الأفقية بين الأعمدة
**أمثلة:** `gap: 16px` — 16px في كل الاتجاهات `gap: 24px 16px` — 24px بين الصفوف، 16px بين الأعمدة
| 1 | /* flex مع gap */ |
| 2 | .nav { display: flex; gap: 8px; } |
| 3 | .cards { display: flex; flex-wrap: wrap; gap: 24px 16px; } |
| 4 | |
| 5 | /* grid مع gap */ |
| 6 | .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } |
مثال 1: بطاقات بـ gap
| 1 | .cards-grid { |
| 2 | display: flex; |
| 3 | flex-wrap: wrap; |
| 4 | gap: 24px; |
| 5 | } |
| 6 | |
| 7 | .cards-grid .card { |
| 8 | flex: 1 1 280px; /* ينمو لكن لا يصغر عن 280px */ |
| 9 | max-width: 360px; |
| 10 | background: white; |
| 11 | border-radius: 12px; |
| 12 | padding: 20px; |
| 13 | box-shadow: 0 1px 3px rgba(0,0,0,0.1); |
| 14 | } |