78. تطبيق Grid العملي: بناء نظام 12 عموداً

تستخدم معظم أطر عمل CSS (مثل Bootstrap) نظام شبكة مكون من 12 عموداً لأن الرقم 12 يقبل القسمة بسهولة على 2 و 3 و 4 و 6. تنفيذ هذا في CSS Grid الأصلي أمر مباشر.

تعريف الشبكة

نحدد 12 عموداً كسرياً متساوي الحجم.

css .grid-12 { display: grid; /* يعرف 12 عموداً متساوي العرض */ grid-template-columns: repeat(12, 1fr); gap: 20px; }

وضع العناصر

نستخدم الكلمة المحجوزة span لإخبار العناصر بعدد الأعمدة التي يجب أن تشغلها.

html

css .col-12 { /* يبدأ من الخط 1، ويمتد على 12 مساراً (العرض الكامل) */ grid-column: span 12; }

.col-6 { /* يمتد على 6 مسارات (نصف العرض) */ grid-column: span 6; }

.col-4 { /* يمتد على 4 مسارات (ثلث العرض) */ grid-column: span 4; }

نصيحة للتجاوب: سنقوم لاحقاً بدمج هذا الهيكل مع استعلامات الوسائط (media queries) لتغيير مقدار الـ span (على سبيل المثال، span 12 على الهاتف، و span 4 على الحاسوب).