صفت grid-gap در css فاصله ردیف و ستون آیتم grid
در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد خاصیت grid-gap در زبان css توضیحاتی را ارائه نماییم.
ویژگی grid-gap در سطح 1 زبان طراحی سی اس اس یعنی ماژول سی اس اس گرید سطح 1 معرفی شده است.
معرفی ویژگی کاربردی grid-gap در زبان طراحی سی اس اس
توسط خاصیت grid-gap می توانیم فاصله بین ردیف و ستون آیتم های گرید ( grade ) را مشخص نماییم.
خصوصیت کاربردی grid-gap در حقیقت مختصرنویسی 2 خصوصیت دیگر در سی اس اس گرید می باشد که عبارتند از:
- خصوصیت grid-row-gap
- خصوصیت grid-column-gap
مقادیر صفت کاربردی grid-gap در زبان طراحی سی اس اس
صفت کاربردی grid-gap که در ماژول سی اس اس گرید سطح 1 معرفی شده است، 2 مقدار می پذیرد که عبارت است از:
- مقدار grid-row-gap
- مقدار grid-column-gap
صفت grid-gap در css فاصله ردیف و ستون آیتم grid
مقدار grid-row-gap درون خاصیت grid-gap در زبان سی اس اس
اگر خاصیت grid-gap را برابر با مقدار grid-row-gap قرار دهیم، یعنی می خواهیم یک مقدار عددی اعم از rem و px و cm و % و … جهت تعیین فاصله بین ردیفی آیتم های grade ( گرید ) مشخص نماییم.
مثال براساس مقدار grid-row-gap برای خاصیت grid-gap
1 | div {grid-gap: 20px;} |
مقدار grid-column-gap درون خاصیت grid-gap در زبان سی اس اس
اگر خاصیت grid-gap را برابر با مقدار grid-column-gap قرار دهیم، یعنی می خواهیم یک مقدار عددی اعم از rem و px و cm و % و … جهت تعیین فاصله بین ستونی آیتم های grade ( گرید ) مشخص نماییم.
مثال براساس مقدار grid-column-gap برای خاصیت grid-gap
1 | div {grid-gap: 20px;} |
بررسی خاصیت grid-gap از نظر نسخه زبان طراحی سی اس اس
خصوصیت grid-gap در سطج 1 زبان طراحی سی اس اس یعنی ماژول CSS گرید سطح 1 معرفی شده است.
بررسی ساختاری خصوصیت grid-gap
عناوین ساختاری خاصیت grid-gap | وضعیت ساختاری خاصیت grid-gap |
مقدار پیش فرض | 0 0 |
قابلیت توارث | ندارد |
قابلیت تحرک | دارد |
ورژن css صفت | ماژول CSS گرید سطح 1 |
سینتکس صفت در جاوا اسکریپت | "object.style.gridGap="50px 100px |
پشتیبانی مرورگرهای اینترنتی از خاصیت grid-gap در زبان طراحی سی اس اس
| خاصیت css |  |  |  |  |  |
| grid-gap | 57 | 16 | 52 | 10 | 44 |
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
