صفت grid-template-columns در css

صفت grid-template-columns در css عرض ستون grid

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

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

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

توسط خاصیت grid-template-columns می توانیم لیستی از شماره و عرض ستون ها را برای آیتم های گرید مشخص نماییم.

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

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

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

1. مقدار none
2. مقدار auto
3. مقدار max-content
4. مقدار min-content
5. مقدار length ( مقدار طولی )
6. مقدار initial
7. مقدار inherit

صفت grid-template-columns در css عرض ستون grid

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

اگر خاصیت grid-template-columns را برابر با مقدار none قرار دهیم، یعنی می خواهیم شماره و اندازه ستون های آیتم grade ( گرید ) ایجاد نشود.

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

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

[html] div {grid-auto-column: none;} [/html]

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

اگر خاصیت grid-template-columns را برابر با مقدار auto قرار دهیم، یعنی می خواهیم اندازه ستون ها بر اساس اندازه عنصر نگهدارنده و اندازه محتویات ستون ها در آیتم های گرید تعیین شود.

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

[html] div {grid-template-columns: auto auto auto auto;} [/html]

مقدار max-content درون خاصیت grid-template-columns در زبان سی اس اس

اگر خاصیت grid-template-columns را برابر با مقدار max-content قرار دهیم، یعنی می خواهیم اندازه ستون ها به بزرگ ترین آیتم ستونی grade ( گرید ) بستگی داشته باشد.

مثال براساس مقدار max-content برای خاصیت grid-template-columns

[html] div {grid-template-columns: max-content max-content;} [/html]

صفت grid-template-columns در css عرض ستون grid

مقدار min-content درون خاصیت grid-template-columns در زبان css

اگر خاصیت grid-template-columns را برابر با مقدار min-content قرار دهیم، یعنی می خواهیم اندازه ستون ها به بزرگ ترین آیتم ستونی grade ( گرید ) بستگی داشته باشد.

مثال براساس مقدار min-content برای خاصیت grid-template-columns

[html] div {grid-template-columns: min-content min-content;} [/html]

مقدار length ( مقدار طولی ) درون خاصیت grid-template-columns در زبان سی اس اس

اگر خاصیت grid-template-columns را برابر با مقدار length ( مقدار طولی ) قرار دهیم، یعنی می خواهیم یک مقدار طولی که می تواند به واحد % (مقدار درصدی ) ، px ، rem و … باشد، را جهت تعیین عرض و ارتفاع ستون های ضمنی آیتم های گرید ( grade ) تعیین کنیم.

مثال براساس مقدار length ( مقدار طولی ) برای خاصیت grid-template-columns

[html] div {grid-template-columns: 50px 20% 100px;} [/html]

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

اگر خاصیت grid-template-columns را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

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

اگر خاصیت grid-template-columns را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.

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

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

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

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

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

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

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

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

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

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

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

تگ های HTML در W3school

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

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

صفت grid-template-columns در css عرض ستون grid – اختصاصی سایت آموزی