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

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

Free-Learn

ویژگی grid-template در CSS

با استفاده از ویژگی grid-template در CSS میتوان ویژگی های زیر را بصورت خلاصه نوشت یا در واقع از این ویژگی برای خلاصه نویسی ویژگی هایی زیر مورد استفاده قرار میگیرد :

Free-Learn

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

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

مثال شماره 1 : ایجاد 4 ستون از آیتم ها و اندازه سطر اول 130 پیکسل

.My-Container{
 display: grid;
 grid-template: 130px / auto auto auto auto;
}

.My-Container{

display: grid;

grid-template: 130px / auto auto auto auto;

}

امتحان کنید

مثال شماره 2 : ایجاد 3 ستون از آیتم ها و اندازه سطر اول 100 پیکسل و سطر دوم 120 پیکسل و سطر سوم 130 پیکسل

.My-Container{
 display: grid;
 grid-template: 100px 110px 120px / auto auto auto;
}

.My-Container{

display: grid;

grid-template: 100px 110px 120px / auto auto auto;

}

امتحان کنید

مثال شماره 3 : تعریف خودکار سطرها، و تعریف 3 ستون ( و اندازه ستون دوم 120 پیکسل )

.My-Container{
 display: grid;
 grid-template: auto / auto 120px auto;
}

.My-Container{

display: grid;

grid-template: auto / auto 120px auto;

}

امتحان کنید

مثال شماره 4 : تعریف یک نام برای آیتم توسط grid-area و اتصال همان نام به grid-template

.My-Container{
 display: grid;
 grid-template: 'MyItem1 MyItem1 MyItem2 MyItem2';
}

.Item1{
 grid-area: MyItem1;
}

.Item2{
 grid-area: MyItem2;
}

.My-Container{

display: grid;

grid-template: 'MyItem1 MyItem1 MyItem2 MyItem2';

}

.Item1{

grid-area: MyItem1;

}

.Item2{

grid-area: MyItem2;

}

امتحان کنید

Free-Learn

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

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

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

Free-Learn

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

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

نام ویژگی	Chrome	Firefox	Opera	Safari	Edge
grid-template	57	52	44	10.1	16

Free-Learn

شکل نوشتاری

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

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;

1	grid-template: none\|grid-template-rows / grid-template-columns\|grid-template-areas\|initial\|inherit;

Free-Learn

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

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

مقدار	توضیح
none	مقدار پیش فرض – مرورگرها خودکار مشخص میکنند
grid-template-rows / grid-template-columns	بخش اول اندازه و تعداد سطرها و بخش دوم اندازه و تعداد ستون ها را مشخص میکند
grid-template-areas	یک نام دلخواه برای آیتم مشخص میکند
initial	استفاده از مقدار پیش فرض یا اولیه \| اطلاعات بیشتر
inherit	استفاده از مقدار پدر یا والد ( به ارث بری ) \| اطلاعات بیشتر