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

grid-column-gap property

ویژگی grid-column-gap در (گرید) CSS اندازه شکاف (gap) بین ستون ها را در ساختار grid مشخص می کند.

نحوه نوشتار

grid-column-gap: auto;
grid-column-gap: 10px;
grid-column-gap: 1rem;
grid-column-gap: 8%;

grid-column-gap: طول | درصد;

مقادیر

طول

اندازه شکاف (gap) بین ستون ها را در ساختار grid توسط واحد های اندازه CSS مشخص می کند. این مقدار نمی تواند منفی باشد. (px, rem ,em)

درصد

اندازه شکاف بین ستون ها را در ساختار grid توسط درصد مشخص می کند. این مقدار نمی تواند منفی باشد.

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

html

<div class="container">
   <p>grid-column-gap: <span>5px;</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>5%;</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 1fr 1fr;
     grid-template-rows: 100px;
}
.wrapper1 {
     grid-column-gap: 5px; 
}
.wrapper2 {
     grid-column-gap: 5%; 
}
.item { background-color: lightgreen; }
span { color: red; }
p { margin-top: 0; }

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

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