خلاصه جلسه: بخش‌بندی المان‌ها با Naming در CSS Grid

۱. grid-template-areas

• تعریف نواحی با نام (Naming) برای هر بخش از Grid
• هر سلول می‌تواند یک نام داشته باشد یا با . (نقطه) خالی بماند.
  • نقطه یعنی فضای خالی یا بدون اختصاص به هیچ آیتمی

• مثال کاربردی:

  
  grid-template-areas:
    "header header header . ."
    "sidebar content content content ."
    "footer footer footer footer footer";
  

۲. اتصال آیتم‌ها به نواحی

• هر آیتم با grid-area به نام ناحیه متصل می‌شود:

   

  .header { grid-area: header; }
  .sidebar { grid-area: sidebar; }
  .content { grid-area: content; }
  .footer { grid-area: footer; }
  

۳. نکات مهم

• Naming باعث خوانایی و ویرایش آسان کد می‌شود
• تغییر مکان آیتم‌ها تنها با تغییر نام‌ها در grid-template-areas انجام می‌شود
• نقطه (.) = فضای خالی بدون اختصاص به هیچ آیتمی