**grid-template-areas** يتيح تعريف تخطيط الصفحة بطريقة بصرية جداً عبر أسماء المناطق:
```css grid-template-areas: "header header header" "sidebar main main" "footer footer footer"; ```
كل سطر في الاقتباس = صف. كل كلمة = خلية. نقطة (.) = خلية فارغة.
**grid-area** يُخصّص عنصراً لمنطقة بعينها: `grid-area: sidebar;`
**الفوائد:** - قراءة الكود أوضح بكثير من رقام السطور والأعمدة. - تغيير التخطيط في media queries أسهل — فقط أعد ترتيب الأسماء. - تُنشئ التخطيطات المعقدة بكود أقل.
| 1 | .page { |
| 2 | display: grid; |
| 3 | grid-template-areas: |
| 4 | "header header" |
| 5 | "sidebar main" |
| 6 | "footer footer"; |
| 7 | grid-template-columns: 260px 1fr; |
| 8 | grid-template-rows: 72px 1fr 60px; |
| 9 | min-height: 100vh; |
| 10 | } |
| 11 | |
| 12 | .page-header { grid-area: header; } |
| 13 | .page-sidebar { grid-area: sidebar; } |
| 14 | .page-main { grid-area: main; } |
| 15 | .page-footer { grid-area: footer; } |
مثال 1: تخطيط متجاوب بـ grid-template-areas
| 1 | .layout { |
| 2 | display: grid; |
| 3 | grid-template-areas: |
| 4 | "header" |
| 5 | "nav" |
| 6 | "main" |
| 7 | "sidebar" |
| 8 | "footer"; |
| 9 | grid-template-columns: 1fr; |
| 10 | } |
| 11 | |
| 12 | @media (min-width: 768px) { |
| 13 | .layout { |
| 14 | grid-template-areas: |
| 15 | "header header" |
| 16 | "nav nav" |
| 17 | "sidebar main" |
| 18 | "footer footer"; |
| 19 | grid-template-columns: 240px 1fr; |
| 20 | } |
| 21 | } |