صفت grid-template-areas در css اسم خاص آیتم grid

صفت grid-template-areas در css اسم خاص آیتم grid

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد خاصیت grid-template-areas در زبان css توضیحاتی را ارائه نماییم.

ویژگی grid-template-areas در سطح 1 زبان طراحی سی اس اس یعنی ماژول سی اس اس گرید سطح 1 معرفی شده است.

معرفی ویژگی کاربردی grid-template-areas در زبان طراحی css

توسط خاصیت grid-template-areas می توانیم یک رشته ( string ) چیدمانی برای آیتم های گرید که توسط خصوصیت grid-area نام گذاری شده اند، تعیین نماییم.

مقادیر صفت کاربردی grid-template-areas در زبان طراحی سی اس اس

صفت کاربردی grid-template-areas که در ماژول سی اس اس گرید سطح 1 معرفی شده است، 2 مقدار می پذیرد که عبارت است از:

مقدار none
مقدار itemnames

مقدار none درون خاصیت grid-template-areas در زبان css

اگر خاصیت grid-template-areas را برابر با مقدار none قرار دهیم، یعنی می خواهیم آیتم های گرید از طربق رشته ( string ) اسمی کنار هم چیدمان نشوند.

مقدار row به عنوان مقدار پیش فرض خصوصیت grid-template-areas می باشد.

مثال براساس مقدار none برای خاصیت grid-template-areas

 div {grid-template-areas: none;}

1	div {grid-template-areas: none;}

مقدار itemnames درون خاصیت grid-template-areas در زبان سی اس اس

اگر خاصیت grid-template-areas را برابر با مقدار itemnames قرار دهیم، یعنی می خواهیم آیتم های گریدی که توسط خصوصیت grid-area نام گذاری شده اند را چیدمان کنیم.

مثال براساس مقدار itemnames برای خاصیت grid-template-areas

<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header'
'menu main main main right right'
'menu footer footer footer footer';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;}
</style>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>

<style>

.item1 { grid-area: header; }

.item2 { grid-area: menu; }

.item3 { grid-area: main; }

.item4 { grid-area: right; }

.item5 { grid-area: footer; }

.grid-container {

display: grid;

grid-template-areas:

'header header header header header'

'menu main main main right right'

'menu footer footer footer footer';

grid-gap: 10px;

background-color: #2196F3;

padding: 10px;}

</style>

<div class="item1">Header</div>

<div class="item4">Right</div>

<div class="item5">Footer</div>

</div>

خروجی کد در مرورگر اینترنتی

صفت grid-template-areas در css اسم خاص آیتم grid

بررسی خاصیت grid-template-areas از نظر نسخه زبان طراحی سی اس اس

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

بررسی ساختاری خصوصیت grid-template-areas


عناوین ساختاری خاصیت grid-template-areas	وضعیت ساختاری خاصیت grid-template-areas
مقدار پیش فرض	none
قابلیت توارث	ندارد
قابلیت تحرک	دارد
ورژن css صفت	ماژول CSS گرید سطح 1
سینتکس صفت در جاوا اسکریپت	"object.style.gridTemplateAreas=". . . myArea myArea