خانه آموزش CSS آموزش ویژگی های CSS آموزش ویژگی grid-template-areas در CSS

آموزش ویژگی grid-template-areas در CSS

توسط

۱۳۹۹-۰۲-۲۲

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی grid-template-areas در CSS با من همراه باشید.

آموزش ویژگی grid-template-areas در CSS

Free-Learn

آنچه در این جلسه میخوانید :

1 ویژگی grid-template-areas در CSS
2 مثال از این ویژگی
3 جدول مشخصات ویژگی grid-template-areas در CSS
4 پشتیبانی مرورگرها
5 شکل نوشتاری
6 جدول مقادیر ویژگی grid-template-areas در CSS
7 نکات و توضیحات

ویژگی grid-template-areas در CSS

با استفاده از ویژگی grid-template-areas در CSS میتوان مناطق ( area ) های یک سیستم گرید ( Grid ) را مشخص و یا تعریف کرد، که این مناطق میتوانند توسط ویژگی grid-area با یک نام دلخواه مشخص شوند.

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی grid-template-areas را در زبان CSS مشاهده نمایید.

مثال شماره ۱ :

.My-Container {
  display: grid;
  grid-template-areas: 'my-header my-header my-header my-header';
}

.item1{
 grid-area: my-header;
}

.My-Container {

display: grid;

grid-template-areas: 'my-header my-header my-header my-header';

}

.item1{

grid-area: my-header;

}

امتحان کنید

مثال شماره ۲ : با استفاده از نقطه (.) میتوان بقیه ستون هارو که نام ندارند بصورت خودکار تعریف کرد.

.My-Container {
  display: grid;
  grid-template-areas:
   'my-header my-header . . .'
   'my-header my-header . . .'
   'my-header my-header . . .';
}

.item1{
 grid-area: my-header;
}

.My-Container {

display: grid;

grid-template-areas:

'my-header my-header . . .'

'my-header my-header . . .';

}

.item1{

grid-area: my-header;

}

امتحان کنید

مثال شماره ۳ : ایجاد یک طرح بندی ساده قالب ( هدر – ستون راست و چپ و وسط – فوتر ) + واکنش گرایی ( یعنی در گوشی های موبایل آیتم ها به نسبت صفحه نمایش تغییر مکان میدهند )

.My-Container {
  display: grid;
  grid-template-areas:
   'header header header header header'
   'seton-chap main main main seton-rast'
   'footer footer footer footer footer';
}

.item1 {
  grid-area: header;
}

.item2 {
  grid-area: seton-chap;
}

.item3 {
  grid-area: main;
}

.item4 {
  grid-area: seton-rast;
}

.item5 {
  grid-area: footer;
}

.My-Container {

display: grid;

grid-template-areas:

'header header header header header'

'seton-chap main main main seton-rast'

'footer footer footer footer footer';

}

.item1 {

grid-area: header;

}

.item2 {

grid-area: seton-chap;

}

.item3 {

grid-area: main;

}

.item4 {

grid-area: seton-rast;

}

.item5 {

grid-area: footer;

}

امتحان کنید

Free-Learn

جدول مشخصات ویژگی grid-template-areas در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض	none
قابل ارث بری	ندارد \| اطلاعات بیشتر
قابل متحرک سازی	دارد \| اطلاعات بیشتر
نسخه	CSS Grid Layout Module Level 1
نحوه استفاده در جاوااسکریپت	object.style.gridTemplateAreas=”myArea myArea . . .”;

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی grid-template-areas در CSS پشتیبانی میکنند یا خیر.

نام ویژگی	Chrome	Firefox	Opera	Safari	IE
grid-template-areas	۵۷	۵۲	۴۴	۱۰	خیر

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

grid-template-areas: none|Item_Name|initial|inherit;

1	grid-template-areas: none\|Item_Name\|initial\|inherit;

Free-Learn

جدول مقادیر ویژگی grid-template-areas در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار	توضیح
none	پیش فرض – هیچ نامی را برای مناطق گرید مشخص نمیکند
Item_Name	نام آیتمی را که توسط ویژگی Grid-Area مشخص شده است، مشخص میکند
initial	استفاده از مقدار پیش فرض یا اولیه \| اطلاعات بیشتر
inherit	استفاده از مقدار پدر یا والد ( به ارث بری ) \| اطلاعات بیشتر

Free-Learn

نکات و توضیحات

این ویژگی در مرورگر اینترنت اکسپلورر یا IE پشتیبانی نمیشود.
برای جدا کردن هر یک از مناطق ( area ها ) باید یک فاصله بین هر یک از نام آیتم ها قرار داد
با استفاده از نقطه (.) میتوان مناطقی را که نام مشخصی ندارند بصورت خودکار تعریف کرد. (همانند مثال شماره ۲)
برای تعریف یک نام برای یک آیتم باید از ویژگی grid-area استفاده نمایید

برای ایجاد هر یک از سطر / ردیف های گرید باید نام آیتم ها را درون تک کوتیشن ‘ ‘ قرار داد. مثال :

grid-template-areas:
   'My-Area My-Area My-Area My-Area'   /* سطر / ردیف اول */
   'My-Area My-Area My-Area My-Area'   /* سطر / ردیف دوم */
   'My-Area My-Area My-Area My-Area'   /* سطر / ردیف سوم */
   'My-Area My-Area My-Area My-Area';  /* سطر / ردیف چهارم */

grid-template-areas:

'My-Area My-Area My-Area My-Area' /* سطر / ردیف اول */

'My-Area My-Area My-Area My-Area' /* سطر / ردیف دوم */

'My-Area My-Area My-Area My-Area' /* سطر / ردیف سوم */

'My-Area My-Area My-Area My-Area'; /* سطر / ردیف چهارم */

Free-Learn

دریافت PDF یا پرینت این مطلب