ویژگی grid-template-rows در CSS

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 پشتیبانی می کنند.