صفت grid-template-rows در css عرض ردیف آیتم grid

صفت grid-template-rows در css عرض ردیف آیتم grid

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

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

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

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

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

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

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

مقدار none
مقدار auto
مقدار max-content
مقدار min-content
مقدار length ( مقدار طولی )
مقدار initial
مقدار inherit

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

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

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

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

 div {grid-template-rows: none;}

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

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

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

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

 div {grid-template-rows: auto auto auto auto;}

1	div {grid-template-rows: auto auto auto auto;}

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

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

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

 div {ggrid-template-rows: max-content max-content;}

1	div {ggrid-template-rows: max-content max-content;}

صفت grid-template-rows در css عرض ردیف آیتم grid

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

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

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

 div {grid-template-rows: min-content min-content;}

1	div {grid-template-rows: min-content min-content;}

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

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

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

 div {grid-template-rows: 50px 20% 100px;}

1	div {grid-template-rows: 50px 20% 100px;}

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

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

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

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

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

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

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


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