grid-row-gap property
ویژگی grid-row-gap
در (گرید) CSS اندازه شکاف (gap) بین ردیف ها را در ساختار grid مشخص می کند.
نحوه نوشتار
grid-row-gap: auto; grid-row-gap: 10px; grid-row-gap: 1rem; grid-row-gap: 8%; grid-row-gap: طول | درصد;
مقادیر
طول
اندازه شکاف (gap) بین ردیف ها را در ساختار grid توسط واحد های اندازه CSS مشخص می کند. این مقدار نمی تواند منفی باشد. (px
, rem
,em
)
درصد
اندازه شکاف بین ردیف ها را در ساختار grid توسط درصد مشخص می کند. این مقدار نمی تواند منفی باشد.
در مثال زیر نحوه عملکرد این ویژگی را می بینیم:
html
<div class="container"> <p>grid-column-gap: <span>1rem;</span></p> <div class="wrapper1"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </div> <div class="container"> <p>grid-column-gap: <span>7px;</span></p> <div class="wrapper2"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </div>
css
body { display: flex; justify-content: space-around; font-family: monospace; } .container { padding: 12px; background-color: #f7f7f7; } [class*="wrapper"] { display: grid; width: 250px; grid-template-columns: 1fr; grid-template-rows: repeat(3, 50px); } .wrapper1 { grid-row-gap: 1rem; } .wrapper2 { grid-row-gap: 7px; } .item { background-color: lightsalmon; } span { color: red; } p { margin-top: 0; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها بجز Internet Explorer از این ویژگی CSS پشتیبانی می کنند.