首先网格化布局必须通过 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>