**CSS Grid** هو نظام تخطيط ثنائي الأبعاد (صفوف وأعمدة معاً) — الأقوى في CSS لإنشاء تخطيطات معقدة.
**لتفعيل Grid:** أضف `display: grid` على الحاوية. أبناؤها المباشرون يصبحون Grid Items.
**grid-template-columns:** يحدد عدد وأحجام الأعمدة. `grid-template-columns: 200px 1fr 1fr;` — عمود 200px + عمودان متساويان
**grid-template-rows:** يحدد ارتفاع الصفوف. `grid-template-rows: 80px auto 60px;` — header + محتوى + footer
**وحدة fr (fraction):** وحدة خاصة بـ Grid تُمثّل كسراً من المساحة المتاحة. `1fr 2fr` = الأول يأخذ ثلث المساحة، والثاني يأخذ الثلثين.
**مقارنة Grid vs Flexbox:** - Flexbox: أحادي البُعد — صف أو عمود - Grid: ثنائي الأبعاد — صفوف وأعمدة معاً
| 1 | /* شبكة ثلاثة أعمدة */ |
| 2 | .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } |
| 3 | |
| 4 | /* تخطيط صفحة كلاسيكي */ |
| 5 | .page { |
| 6 | display: grid; |
| 7 | grid-template-columns: 260px 1fr; |
| 8 | grid-template-rows: 72px 1fr 60px; |
| 9 | min-height: 100vh; |
| 10 | } |
مثال 1: شبكة بطاقات متجاوبة
| 1 | .products-grid { |
| 2 | display: grid; |
| 3 | grid-template-columns: repeat(3, 1fr); |
| 4 | gap: 24px; |
| 5 | padding: 32px; |
| 6 | } |
| 7 | |
| 8 | /* على الموبايل */ |
| 9 | @media (max-width: 640px) { |
| 10 | .products-grid { grid-template-columns: 1fr; } |
| 11 | } |
| 12 | |
| 13 | @media (min-width: 641px) and (max-width: 1024px) { |
| 14 | .products-grid { grid-template-columns: repeat(2, 1fr); } |
| 15 | } |