Gap属性
属性值
1、row-gap
设置网格布局中行之间的间隙大小
2、column-gap
设置网格布局中列之间的间隙大小
语法
gap: row-gap column-gap;
应用场景
在我们设置网格之间的间距的时候，一般用margin 或者 padding来设置元素之间的间距，但是我们在最后的时候可能不需要间距，那就需要单独为他设置一个为0的值来抵消。
实际代码
HTML
<div class="grid-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div>
CSS
<style> .grid-container { display: grid; grid-template-columns: auto auto auto; gap: 50px; border: 1px solid red; } .grid-container > div { border: 1px solid black; background-color: green; text-align: center; padding: 10px; color: #fff; } </style>
实际效果
兼容性
