79. تطبيق Grid العملي: إنشاء تخطيط لوحة معلومات معقد

تتألق مناطق الشبكة (Grid Areas) عند بناء واجهات غير منتظمة ومعقدة مثل لوحات المعلومات، حيث تحتاج العناصر إلى شغل خلايا متنوعة.

التخطيط المطلوب (تصور مرئي):

التنفيذ باستخدام مناطق الشبكة

نحدد 3 أعمدة و 3 صفوف.

css .dashboard-grid { display: grid; /* تعريف عرض الأعمدة / grid-template-columns: 150px 1fr 200px; / تعريف ارتفاع الصفوف */ grid-template-rows: 150px 1fr 50px; gap: 10px;

/* رسم التخطيط بالكامل */ grid-template-areas: "nav header header" "nav main sidebar" "footer footer footer"; }

/* تعيين العناصر للمناطق المسماة */ .nav-menu { grid-area: nav; } .header { grid-area: header; } .main-section{ grid-area: main; } .side-bar { grid-area: sidebar; } .page-footer { grid-area: footer; }

الفائدة: لتغيير التخطيط بالكامل (مثلاً، نقل الشريط الجانبي أسفل التنقل)، ما عليك سوى تعديل خاصية grid-template-areas ، مع ترك تنسيق العناصر كما هو.