Qui-Note官网Logo
导航:Qui-Note/CSS grid间隔属性gap的实例

CSS grid间隔属性gap的实例

grid-row-gap:10px;grid-column-gap:20px;
等价于下面代码:
grid-gap:10px 20px;
等价于:
gap:10px 20px;

html代码

<style>
    .grid{
    	line-height: 100px;
    	text-align: center;
    	display: grid;
    	grid-template-columns:100px 100px 100px;
    	grid-template-rows:100px 100px 10px;
    	gap:10px 20px;
    }
     
    .item{
    	color: #fff;
    	font-size: 16px;
    }
    .bg01{background: #0057C4;}
    .bg02{background: #000000;}
    .bg03{background: #008000;}
</style>
<div class="grid">
	<div class="item bg01">1</div>
	<div class="item bg02">2</div>
	<div class="item bg03">3</div>
	<div class="item bg03">4</div>
	<div class="item bg01">5</div>
	<div class="item bg02">6</div>
</div> 

效果展示:

1
2
3
4
5
6