صفت grid-template-rows در css
صفت 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;}
مقدار auto درون خاصیت grid-template-rows در زبان سی اس اس
اگر خاصیت grid-template-rows را برابر با مقدار auto قرار دهیم، یعنی می خواهیم اندازه ردیف ها بر اساس اندازه عنصر نگهدارنده و اندازه محتویات ردیف ها در آیتم های گرید تعیین شود.
مثال براساس مقدار auto برای خاصیت grid-template-rows
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;}
مقدار min-content درون خاصیت grid-template-rows در زبان سی اس اس
اگر خاصیت grid-template-rows را برابر با مقدار min-content قرار دهیم، یعنی می خواهیم اندازه ردیف ها به بزرگ ترین آیتم ردیفی grade ( گرید ) بستگی داشته باشد.
مثال براساس مقدار min-content برای خاصیت grid-template-rows
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;}
مقدار 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 |
پشتیبانی مرورگرهای اینترنتی از صفت grid-template-rows در css
خاصیت css | |||||
grid-template-rows | 57 | 16 | 52 | 10 | 44 |
برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای آموزش طراحی سایت فروشگاهی با وردپرس پروژه محور
برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای آموزش طراحی وب با HTML5 و CSS3 و jQuery
برای متخصص شدن در بهینه سازی و سئوی سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره آموزش سئو محتوا کاملا حرفه ای براساس آخرین آپدیت های گوگل
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
صفت grid-template-rows در css عرض ردیف آیتم grid – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید