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

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