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

grid-auto-rows property

ویژگی grid-auto-rows در (گرید) CSS اندازه ردیف های مجازی (ردیف هایی که خارج از تعداد ردیف های تعریف شده افزوده می شوند) را مشخص می کند.

نحوه نوشتار

grid-auto-rows: auto;
grid-auto-rows: min-content;
grid-auto-rows: max-content;
grid-auto-rows: 300px;
grid-auto-rows: 1fr;
grid-auto-rows: minmax(100px, 200px);

grid-auto-rows: auto|max-content|min-content|length;

مقادیر

auto

اندازه ردیف ها با در نظر گرفتن اندازه والد مشخص می شود. این مقدار پیشفرض است.

max-content

اندازه هر ردیف را مطابق با بزرگترین اندازه محتوای داخل ستون مشخص می کند.

min-content

اندازه هر ردیف را مطابق با کوچکترین اندازه محتوای داخل ستون مشخص می کند.

minmax(min,max)

محدوده کمترین و بیشترین اندازه ردیف را مشخص می کند.

length

اندازه ردیف ها را بر حسب مقادیر ثابت با واحدهای اندازه CSS مشخص می کند. (px, rem, em)

در مثال زیر نحوه عملکرد این ویژگی را می بینیم:

html

<div class="container">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
    <div class="item4"></div>
</div>

css

.container {
     display: grid;
     grid-template-rows: repeat(2, 100px);
     grid-auto-rows: 50px;
     grid-gap: 10px;
}
.container > div {
     background-color: lightslategray;
}
.container .item3,
.container .item4 {
     background-color: tomato;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند. مرورگر Firefox of Android بصورت نسبی از این ویژگی پشتیبانی می کند.