صفت grid-area در css اندازه و مکان آیتم های grid

صفت grid-area در css اندازه و مکان آیتم های grid

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

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

معرفی ویژگی کاربردی grid-area در زبان طراحی سی اس اس

توسط خاصیت grid-area می توانیم مکان و اندازه شروع و انتهای ردیف و ستون آیتم های گرید ( grade ) را مشخص نماییم.

خصوصیت کاربردی grid-area در حقیقت مختصرنویسی 4 خصوصیت دیگر در سی اس اس گرید می باشد که عبارتند از:

خصوصیت grid-row-start
خصوصیت grid-column-start
خصوصیت grid-row-end
خصوصیت grid-column-end

نکات مهم

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

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

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

مقدار grid-row-start
مقدار grid-column-start
مقدار grid-row-end
مقدار grid-column-end

صفت grid-area در css اندازه و مکان آیتم های grid

مقدار grid-row-start درون خاصیت grid-area در زبان سی اس اس

اگر خاصیت grid-area را برابر با مقدار grid-row-start قرار دهیم، یعنی می خواهیم یک شماره با span ( ترک ) و یا یک شماره خط جهت تعیین اندازه و شروع خط ردیفی آیتم های grade ( گرید ) مشخص نماییم.

مثال براساس مقدار grid-row-start برای خاصیت grid-area

 div {grid-area: 20px;}

1	div {grid-area: 20px;}

مقدار grid-column-start درون خاصیت grid-area در زبان سی اس اس

اگر خاصیت grid-area را برابر با مقدار grid-column-start قرار دهیم، یعنی می خواهیم یک شماره با span ( ترک ) و یا یک شماره خط جهت تعیین اندازه و شروع خط ستونی آیتم های grade ( گرید ) مشخص نماییم.

مثال براساس مقدار grid-column-start برای خاصیت grid-area

 div {grid-area: 40px;}

1	div {grid-area: 40px;}

صفت grid-area در css اندازه و مکان آیتم های grid

مقدار grid-row-end درون خاصیت grid-area در زبان سی اس اس

اگر خاصیت grid-area را برابر با مقدار grid-row-end قرار دهیم، یعنی می خواهیم یک شماره با span ( ترک ) و یا یک شماره خط جهت تعیین اندازه و انتهای خط ردیفی آیتم های grade ( گرید ) مشخص نماییم.

مثال براساس مقدار grid-row-end برای خاصیت grid-area

 div {grid-area: 10px;}

1	div {grid-area: 10px;}

مقدار grid-column-end درون خاصیت grid-area در زبان سی اس اس

اگر خاصیت grid-area را برابر با مقدار grid-column-end قرار دهیم، یعنی می خواهیم یک شماره با span ( ترک ) و یا یک شماره خط جهت تعیین اندازه و انتهای خط ردیفی آیتم های grade ( گرید ) مشخص نماییم.

مثال براساس مقدار grid-column-end برای خاصیت grid-area

 div {grid-area: 50px;}

1	div {grid-area: 50px;}

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

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

بررسی ساختاری خصوصیت grid-area


عناوین ساختاری خاصیت grid-area	وضعیت ساختاری خاصیت grid-area
مقدار پیش فرض	auto / auto / auto / auto
قابلیت توارث	ندارد
قابلیت تحرک	دارد
ورژن css صفت	ماژول CSS گرید سطح 1
سینتکس صفت در جاوا اسکریپت	"object.style.gridArea="1 / 2 / span 2 / span 3