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