ویژگی grid-row در CSS

grid-row property

ویژگی کوتاه نویسی grid-row در (گرید) CSS، ویژگی های grid-row-end و grid-row-start می باشد. این ویژگی اندازه و موقعیت عنصر را بر مبنای ردیف و در ساختار grid مشخص می کند.

نحوه نوشتار

grid-row: auto;
grid-row: 2;
grid-row: 2 / 4;
grid-row: span 3;
grid-row: 1 / span 2;

grid-row: grid-row-start / grid-row-end;

مقادیر

مقادیر این ویژگی برابر با مقادیر grid-row-end و grid-row-start می باشد.

auto

عنصر طبق جریان پیشفرض والد جایگیری خواهد کرد. این مقدار پیشفرض است.

span n

تعداد ردیف هایی که عنصر گسترش می یابد را مشخص می کند.

شماره ردیف

مشخص می کند عنصر در کدام ردیف نمایش داده شود.

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

html

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

css

.container {
     display: grid;
     grid-template-columns: 200px;
     grid-template-rows: repeat(4, 50px);
     grid-gap: 7px;
}
[class*="item"] {
     background-color: dodgerblue;
}
.item1 {
     grid-row: 2 / 3;
     background-color: violet;
}
.item2 {
     grid-row: 4 / 5;
     background-color: tomato;
}

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

پشتیبانی مرورگرها
تمام مرورگرها به جز Internet Explorer از این ویژگی CSS پشتیبانی می کنند.