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