grid-template-rows property
ویژگی grid-template-rows
در (گرید) CSS تعداد و عرض ستون ها در ساختار grid را مشخص می کند.
نحوه نوشتار
grid-template-rows: auto; grid-template-rows: min-content; grid-template-rows: max-content; grid-template-rows: 300px; grid-template-rows: 1fr; grid-template-rows: repeat(3, 1fr 3fr 1fr); grid-template-rows: minmax(100px, 200px); grid-template-rows: auto|max-content|min-content|length;
مقادیر
auto
اندازه ردیف ها با در نظر گرفتن اندازه والد مشخص می شود. این مقدار پیشفرض است.
( مقادیر برای اندازه ردیف , اعداد مثبت | auto-fill | auto-fit)repeat
این تابع بخشی را که اندازه ردیف را مشخص می کند، تکرار می کند. این تابع برای تعیین اندازه ردیف هایی در تعداد زیاد، بسیار مؤثر است.
مانند: repeat(4, 250px 300px)
. در این مثال تابع، چهار بار دو ردیف به اندازه های 250px
و 300px
را تکرار می کند (در مجموع، اندازه 8 ردیف مشخص می شود).
max-content
اندازه هر ردیف را مطابق بر بزرگترین اندازه محتوای داخل ردیف مشخص می کند.
min-content
اندازه هر ردیف را مطابق بر کوچکترین اندازه محتوای داخل ردیف مشخص می کند.
minmax(min,max)
محدوده کمترین و بیشترین اندازه ردیف را مشخص می کند.
length
اندازه ردیف ها را بر حسب مقادیر ثابت با واحدهای اندازه CSS مشخص می کند. (px
, rem
, em
)
در مثال زیر نحوه عملکرد این ویژگی را می بینیم:
html
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
css
.container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, 50px 100px); grid-gap: 5px; } [class*="item"] { background-color: lightsteelblue; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها بجز Internet Explorer از این ویژگی CSS پشتیبانی می کنند.