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