كيف تعمل `grid-template-areas` والشبكات المتجاوبة؟

Question

Accepted Answer

`grid-template-areas` يتيح لك وضع تخطيط الشبكة **بصريًا** بتسمية المناطق، مما يجعل تخطيطات الصفحات المعقدة قابلة للقراءة وسهلة إعادة الترتيب بشكل متجاوب.

## تحديد المناطق المسماة

```css
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"   /* row 1: header spans both columns */
    "sidebar main"     /* row 2: sidebar | main */
    "footer  footer";  /* row 3: footer spans both */
  min-height: 100vh;
}

.header  { grid-area: header; }   /* assign each element to a named area */
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
```

`grid-template-areas` على شكل فن ASCII *هو* التخطيط — يمكنك رؤية البنية في لمحة، وتكرار الاسم يجعل المنطقة تمتد عبر الخلايا.

## إعادة الترتيب للهاتف المحمول — فقط أعد رسم الخريطة

```css
@media (max-width: 600px) {
  .layout {
    grid-template-columns: 1fr;        /* single column */
    grid-template-areas:
      "header"
      "main"      /* main now ABOVE sidebar on mobile */
      "sidebar"
      "footer";
  }
}
```

لتغيير التخطيط بالكامل للهاتف المحمول، تقوم فقط بإعادة كتابة خريطة المنطقة — تبقى HTML و تعيينات `grid-area` متطابقة. هذا أنظف بكثير من إعادة تحديد موضع كل عنصر على حدة.

## لماذا هذا قوي

- **موثق ذاتيًا** — CSS يعكس بصريًا التخطيط المعروض.
- **منفصل عن ترتيب المصدر** — يمكن وضع العناصر في أي مكان بغض النظر عن ترتيب HTML (جيد لوضع `main` أولاً في DOM لإمكانية الوصول، مع عرض الشريط الجانبي أولاً بصريًا).
- **إعادة انسياب متجاوبة سهلة** — استبدل نموذج المنطقة لكل نقطة فاصلة.

## لماذا يهمك

تجعل المناطق الشبكية المسماة تخطيطات مستوى الصفحة (رأس/شريط جانبي/رئيسي/تذييل) قابلة للقراءة وسهلة الاستجابة — إعادة الهيكلة مسألة تحرير خريطة ASCII، وليس إعادة توصيل المواضع.

إنها واحدة من أوضح وأسهل تقنيات التخطيط التي تقدمها CSS للصيانة.