70. وضع العناصر بواسطة أسماء مناطق الشبكة

يعد وضع العناصر باستخدام أرقام الخطوط فعالاً ولكنه قد يصبح مربكاً في التخطيطات المعقدة. غالباً ما يُفضل وضع العناصر باستخدام المناطق المسماة لسهولة القراءة والصيانة.

الخطوة 1: تعريف مناطق الشبكة

استخدم grid-template-areas على الحاوية. كل سلسلة نصية تحدد صفاً، والأسماء داخل السلسلة تحدد الأعمدة. الأسماء المتطابقة تحدد منطقة واحدة مدمجة.

css .page-layout { display: grid; grid-template-columns: 1fr 3fr 1fr; /* يعرف 3 أعمدة */

grid-template-areas: "header header header" "nav main aside" "footer footer footer"; }

• الصف الأول عبارة عن منطقة header بالكامل.
• الصف الثاني يحتوي على ثلاث مناطق متميزة: nav و main و aside.

الخطوة 2: تعيين العناصر للمناطق

استخدم خاصية grid-area على عناصر الشبكة لتعيينها لاسم منطقة محدد.

css header { grid-area: header; }

main { grid-area: main; }

/* سيأخذ العنصر تلقائياً الصفوف والأعمدة المحددة بواسطة المنطقة المسماة */

ملاحظة: استخدم نقطة (.) في تعريف grid-template-areas لترك خلية شبكة فارغة صراحة.