Grid Areas و grid-template-areas

طراحی چیدمان با نام‌های بصری: Grid Areas و grid-template-areas

در درس قبل، ستون‌ها و ردیف‌ها رو با grid-template-columns و grid-template-rows تعریف کردیم. حالا با یکی از جذاب‌ترین و بصری‌ترین قابلیت‌های Grid آشنا می‌شیم: امکان طراحی کل چیدمان یک صفحه، فقط با نوشتن یک نقشه متنی ساده که دقیقاً شبیه ظاهر نهایی صفحه‌ست.

مشکل: موقعیت‌دهی فقط با شماره خط، همیشه شهودی نیست

در درس‌های قبل دیدیم که Grid Lines، با شماره مشخص می‌شن. اما تصور کن می‌خوایم یک چیدمان کامل صفحه بسازیم: هدر، سایدبار، محتوای اصلی و فوتر. تعریف موقعیت هرکدوم فقط با شماره خط (که در درس‌های بعدی با grid-column و grid-row کامل می‌بینیم)، ممکنه کد رو کمی انتزاعی و سخت‌خوان کنه.

راه‌حل: grid-template-areas

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

Property به اسم grid-template-areas اجازه می‌ده کل چیدمان Grid رو، با یک نقشه متنی، دقیقاً شبیه ساختار بصری واقعی صفحه، تعریف کنیم. هر رشته (هر خط داخل گیومه)، معادل یک ردیفه؛ و هر کلمه داخل اون رشته، معادل یک ستون در همون ردیف.

گام دوم: اختصاص نام به هر Grid Item

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

<div class="page">
  <div class="header">هدر</div>
  <div class="sidebar">سایدبار</div>
  <div class="content">محتوا</div>
  <div class="footer">فوتر</div>
</div>

Property به اسم grid-area (که با جزئیات بیشتر در درس‌های بعدی می‌بینیم)، روی هر Grid Item، همون نامی رو که در grid-template-areas براش تعریف کردیم، اختصاص می‌ده. حالا مرورگر می‌دونه دقیقاً هر آیتم باید کجای Grid قرار بگیره؛ بدون نیاز به هیچ شماره خطی.

چطور این نقشه متنی خوانده می‌شود؟

بیایم مثال بالا رو دقیق‌تر بخونیم. grid-template-areas، سه ردیف تعریف کرده:

• ردیف اول: "header header" — یعنی هر دو ستون این ردیف، متعلق به ناحیه header هستن؛ پس هدر، کل عرض بالای صفحه رو می‌گیره.
• ردیف دوم: "sidebar content" — یعنی ستون اول این ردیف، متعلق به sidebar، و ستون دوم، متعلق به contentه.
• ردیف سوم: "footer footer" — دقیقاً مثل هدر، فوتر هم کل عرض پایین صفحه رو می‌گیره.

این ساختار متنی، دقیقاً همون چیزیه که در نمودار بصری زیر می‌بینیم:

┌──────────────────────┐
│        header          │
├──────────┬────────────┤
│ sidebar  │  content    │
├──────────┴────────────┤
│        footer          │
└──────────────────────┘

قانون مهم: هر رشته باید تعداد کلمات یکسانی داشته باشد

.page {
  grid-template-areas:
    "header header"
    "sidebar content"; /* درست: هر دو رشته دو کلمه دارند */
}

هر رشته (یعنی هر ردیف) در grid-template-areas، باید دقیقاً تعداد کلمات یکسانی داشته باشه؛ چون این تعداد کلمات، همون تعداد ستون‌های Grid رو مشخص می‌کنه. اگه این تعداد در ردیف‌های مختلف متفاوت باشه، مرورگر این Rule رو نامعتبر در نظر می‌گیره.

ادغام چند خانه با تکرار نام

.dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "stats stats chart"
    "table table chart";
}

وقتی یک نام، در چند خانه پشت‌سرهم (چه افقی، چه عمودی) تکرار بشه، اون ناحیه، به‌طور خودکار، تمام اون خانه‌ها رو با هم ادغام می‌کنه. در این مثال، stats دو ستون اول ردیف اول رو می‌گیره، و chart، هر دو ردیف ستون سوم رو (یعنی از بالا تا پایین، در یک ستون کشیده می‌شه).

استفاده از نقطه برای خانه‌های خالی

.layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "sidebar content ."
    "footer footer footer";
}

اگه بخوایم یک خانه، عمداً خالی بمونه (بدون اختصاص به هیچ ناحیه‌ای)، از یک یا چند نقطه (.) به‌جای یک اسم استفاده می‌کنیم. در این مثال، خانه سوم ردیف دوم، کاملاً خالی می‌مونه؛ نه به sidebar تعلق داره، نه به content.

هماهنگی با Responsive Design: تغییر کامل چیدمان

.page {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "content"
    "sidebar"
    "footer";
}

@media (min-width: 768px) {
  .page {
    grid-template-columns: 200px 1fr;
    grid-template-areas:
      "header header"
      "sidebar content"
      "footer footer";
  }
}

یکی از قدرتمندترین کاربردهای عملی grid-template-areas، توانایی تغییر کامل ساختار چیدمان در Media Queryهای مختلفه (که به‌طور کامل در فصل Responsive Design بررسیش می‌کنیم). در این مثال، در حالت موبایل، هر بخش زیر هم قرار می‌گیره (و حتی ترتیب content و sidebar عوض شده)؛ ولی در صفحه‌نمایش‌های بزرگ‌تر، چیدمان دو‌ستونه‌ای که قبلاً دیدیم فعال می‌شه. نکته جالب اینه که grid-area روی خود عناصر HTML، اصلاً نیازی به تغییر نداره؛ فقط نقشه grid-template-areas در Container، عوض می‌شه.

چرا این روش، نسبت به شماره‌گذاری خط، محبوب‌تر است؟

مزیت اصلی grid-template-areas، خوانایی بصری فوق‌العاده‌شه؛ کد CSS، تقریباً شبیه یک نقشه بصری واقعی از صفحه‌ست، که خوندن و نگهداریش، مخصوصاً برای چیدمان‌های صفحه کامل (نه اجزای کوچک)، بسیار راحت‌تر از محاسبه و ردیابی شماره خطوطه.

نکات مهم

• grid-template-areas یک نقشه متنی از چیدمان می‌سازد؛ هر رشته یک ردیف، و هر کلمه در آن، یک ستون است.
• Property به اسم grid-area، روی هر Grid Item، همان نامی را که در نقشه تعریف شده، اختصاص می‌دهد.
• تکرار یک نام در چند خانه پشت‌سرهم، آن‌ها را ادغام می‌کند؛ و نقطه (.) برای خانه‌های عمداً خالی استفاده می‌شود.

اشتباهات رایج

• تعریف رشته‌هایی با تعداد کلمات متفاوت در grid-template-areas، که باعث نامعتبر شدن کل Rule می‌شود.
• فراموش کردن اختصاص grid-area با همان نام دقیق، روی هر عنصر HTML مربوطه.
• استفاده از نام‌های ناسازگار بین grid-template-areas و grid-area (مثلاً اشتباه تایپی در یکی از آن‌ها).

جمع‌بندی

grid-template-areas امکان طراحی چیدمان Grid را، با یک نقشه متنی بصری و شهودی، فراهم می‌کند؛ هر رشته یک ردیف و هر کلمه در آن، یک ستون را نشان می‌دهد. با اختصاص همین نام‌ها به هر Grid Item، از طریق Property به اسم grid-area، می‌توان چیدمان‌های کامل صفحه، از جمله تغییرات بزرگ در Responsive Design، را بدون تغییر ساختار HTML، به‌سادگی مدیریت کرد.