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

本站打赏榜

X
馊稀饭 赞助了 陈小知 9.99
太阳 赞助了 陈小知 18.8
fonhen 赞助了 陈小知 8.76
admin 赞助了 陈小知 9.90
ku5151 赞助了 陈小知 9.90
admin 赞助了 陈小知 6.90
Tiger 赞助了 陈小知 9.90
cznq1106 赞助了 陈小知 9.90
459977099 赞助了 陈小知 9.90
2910224190 赞助了 陈小知 9.90