ویژگی grid-row-start در CSS

grid-row-start property

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

نحوه نوشتار

grid-column-start: auto;
grid-column-start: span 3;
grid-column-start: 2

grid-column-start: auto|span n|column-line;

مقادیر

auto

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

span n

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

شماره ردیف

مشخص می کند که آیتم مورد نظر، از ابتدای کدام ردیف و به اندازه یک ردیف گسترش یابد.

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

html

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

css

.container {
    display: grid;
    grid-auto-columns: 300px;
    grid-template-rows: repeat(4, 50px);
    grid-gap: 7px;
}
[class*="item"] {
    background-color: dodgerblue;
}
.item2 {
    grid-row-start: span 2;
    background-color: violet;
}

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

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