grid网格布局 #设置单元格之间的间距

设置行间距：

css：
grid-row-gap：像素；

css代码：

<style>
.box{
width: 300px;
height: 300px;
border:1px solid #000;
margin: 50px auto;
display: grid;
grid-template-rows: repeat(3, 20%);
grid-template-columns: repeat(3, 20%);
grid-row-gap: 20px;
}
</style>

效果：

 

设置列间距：

grid-column-gap：像素；

css代码：

<style>
.box{
width: 300px;
height: 300px;
border:1px solid #000;
margin: 50px auto;
display: grid;
grid-template-rows: repeat(3, 20%);
grid-template-columns: repeat(3, 20%);
grid-column-gap: 20px;
}

效果：