Qui-Note官网Logo
导航:Qui-Note/grid-template-columns和grid-template-rows的常规使用及效果展示

grid-template-columns和grid-template-rows的常规使用及效果展示

首先网格化布局必须通过 display:grid|inline-grid 才能触发,所有grid网格属于生效的前提也是必须有这样的样式,否则不生效!

html代码

<style>
    .grid{
    	line-height: 100px;
    	text-align: center;
    	display: grid;
    	grid-template-columns:100px 100px 100px;
    			grid-template-rows:100px 100px 10px;
    }
    
    .grid1{
    	width: 300px;
    	line-height: 100px;
    	text-align: center;
    	display: grid;
    	grid-template-columns:60% 30% 10%;
    	grid-template-rows:100px 100px 10px;
    }
    
    .grid2{
    	width: 300px;
    	line-height: 100px;
    	text-align: center;
    	display: grid;
    	grid-template-columns:repeat(3,33.33%);
    	grid-template-rows:repeat(auto-fill,100px 100px 10px);
    }
    
    .grid3{
    	width: 300px;
    	line-height: 100px;
    	text-align: center;
    	display: grid;
    	grid-template-columns:100px 2fr 1fr;
    	grid-template-rows:100px 100px 10px;
    }
    .grid4{
    	width: 300px;
    	line-height: 100px;
    	text-align: center;
    	display: grid;
    	grid-template-columns:20px 1fr minmax(50px,2fr);
    	grid-template-rows:100px 100px 10px;
    }
    .grid5{
    	width: 300px;
    	line-height: 100px;
    	text-align: center;
    	display: grid;
    	grid-template-columns:60px 100px auto;
    	grid-template-rows:100px 100px 10px;
    }
    
    .item{
    	color: #fff;
    	font-size: 16px;
    }
    .bg01{background: #0057C4;}
    .bg02{background: #000000;}
    .bg03{background: #008000;}
</style>
<h4>使用绝对单位</h4>
<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> 
<h4>使用百分比%</h4>
<div class="grid1">
	<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>
<h4>使用repeat方法</h4>
<div class="grid2">
	<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>
<h4>使用关键词fr</h4>
<div class="grid3">
	<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>
<h4>minmax()方法</h4>
<div class="grid4">
	<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>
<h4>auto 关键字</h4>
<div class="grid5">
	<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

使用百分比%

1
2
3
4
5
6

使用repeat方法

1
2
3
4
5
6

使用关键词fr

1
2
3
4
5
6

minmax()方法

1
2
3
4
5
6

auto 关键字

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