صفت grid-area در css

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

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

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

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

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

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

1. خصوصیت grid-row-start
2. خصوصیت grid-column-start
3. خصوصیت grid-row-end
4. خصوصیت grid-column-end

نکات مهم

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

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

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

1. مقدار grid-row-start
2. مقدار grid-column-start
3. مقدار grid-row-end
4. مقدار grid-column-end

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

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

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

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

[html] div {grid-area: 20px;} [/html]

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

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

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

[html] div {grid-area: 40px;} [/html]

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

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

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

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

[html] div {grid-area: 10px;} [/html]

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

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

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

[html] div {grid-area: 50px;} [/html]

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

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

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

پشتیبانی مرورگرهای اینترنتی از خاصیت grid-area در زبان طراحی سی اس اس

خاصیت css
grid-area	57	16	52	10	44

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

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