أدوات Grid الذكية لبناء تخطيطات متجاوبة بدون media queries:
**repeat(count, size):** `repeat(4, 1fr)` — أربعة أعمدة متساوية `repeat(3, 200px 1fr)` — تكرار نمط (6 أعمدة)
**minmax(min, max):** يُعرّف عموداً لا يصغر عن min ولا يكبر عن max. `minmax(200px, 1fr)` — يبدأ من 200px ويكبر إذا توفرت مساحة.
**auto-fill:** يملأ الصف بأكبر عدد ممكن من الأعمدة بحجم محدد. يترك مسافات فارغة إن لم تكفِ العناصر.
**auto-fit:** مثل auto-fill لكن يُوسّع الأعمدة الموجودة لملء المساحة كاملاً.
**التركيبة السحرية للتجاوب:** `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));` شبكة تتكيف تلقائياً مع عرض الشاشة دون media queries.
| 1 | /* شبكة متجاوبة تلقائياً */ |
| 2 | .auto-grid { |
| 3 | display: grid; |
| 4 | grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| 5 | gap: 20px; |
| 6 | } |
مثال 1: معرض صور متجاوب تلقائياً
| 1 | .gallery { |
| 2 | display: grid; |
| 3 | grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); |
| 4 | grid-auto-rows: 220px; |
| 5 | gap: 12px; |
| 6 | } |
| 7 | |
| 8 | .gallery img { |
| 9 | width: 100%; |
| 10 | height: 100%; |
| 11 | object-fit: cover; |
| 12 | border-radius: 8px; |
| 13 | } |
| 14 | |
| 15 | /* بطاقة تمتد لعمودين */ |
| 16 | .gallery .featured { |
| 17 | grid-column: span 2; |
| 18 | grid-row: span 2; |
| 19 | } |