ویژگی grid-gap در CSS

grid-gap property

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

نحوه نوشتار

grid-gap: auto;
grid-gap: 10px 5px;
grid-gap: 1rem;
grid-gap: 7%;

grid-gap: grid-row-gap grid-column-gap;

مقادیر

طول

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

درصد

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

این ویژگی کوتاه نویسی ویژگی های grid-row-gap و grid-column-gap می باشد.

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

html

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

css

.container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: 70px 70px;
     grid-gap: 5px 15px;
}
.item { background-color: violet; }

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

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