آموزش نام گذاری آیتم های گرید در CSS

نام گذاری آیتم های گرید با grid-area

ویژگی grid-template-areas یک ظرف گرید را مشخص می کند و ناحیه هایی را در درون چینش گرید(grid layout) مشخص می کند. ما می توانیم با استفاده از ویژگی grid-area در CSS آیتم های گرید را نام گذاری کنیم و آنگاه در ویژگی grid-template-areas به این نام رجوع کنیم. هر ناحیه(area) در داخل علامت تک کوتیشن(نقل قول تکی) قرار می گیرد. آیتم های گرید نام گذاری شده در هر ناحیه(area)، در درون تک کوتیشن ها تعریف می شوند و با استفاده از یک فاصله سفید(space) از یکدیگر جدا می شوند. 

.container {
  display: grid;
  grid-template-areas: 'myHeader myHeader myHeader myHeader myHeader';
}

.item1 {
  grid-area: myHeader;
}

ما می توانیم از یک علامت نقطه(.) برای اشاره به یک آیتم گرید، بدون استفاده از نام، استفاده کنیم:

.container {
  display: grid;
  grid-template-areas: 'myHeader myHeader myHeader . .';
}

.item1 {
  grid-area: myHeader;
}

برای تعریف دو ردیف(دو ناحیه یا area)، می توانید ردیف(row) دوم را  در داخل یک جفت تک کوتیشن دیگر، قرار دهید:

.container {
  display: grid;
  grid-template-areas:
    'myHeader myHeader . . .'
    'myHeader myHeader . . .';
}

.item1 {
  grid-area: myHeader;
}

ایجاد یک قالب وب سایت آماده در CSS

در مثال زیر، تمام آیتم های گرید نام گذاری شده اند تا یک قالب وب سایت آماده ی استفاده، ایجاد شود:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main main right'
    'menu footer footer footer footer footer';
}

منبع: https://www.w3schools.com/css