grid【一【设置分区方式一】】

第一步，设置父元素的grid属性

				width: 400px;
				height: 400px;
				display: -webkit-grid;
				display: grid;

第二步，设置父元素的grid宽高

grid-template-columns:100px 100px 100px auto;
grid-template-rows:100px 100px 100px auto;

目前效果

添加子元素

<div class="contaniner">
			<div class="ia"></div>
			<div class="ib"></div>
			<div class="ic"></div>
			<div class="id"></div>
			<div class="ie"></div>
			<div class="if"></div>
			<div class="ig"></div>			
			<div class="ih"></div>			
			<div class="ii"></div>			
			<div class="ij"></div>			
			<div class="ik"></div>			
			<div class="il"></div>			
			<div class="im"></div>			
			<div class="in"></div>			
			<div class="io"></div>			
			<div class="ip"></div>			
		</div>

一共给了16个div

再增加几个看一下

最后一行平均拆分

位置分配方法A

先恢复到原状

父元素设置

grid-template-areas

同名的成为一块显示

.contaniner{
				width: 400px;
				height: 400px;
				display: -webkit-grid;
				display: grid;
				grid-template-columns:100px 100px 100px auto;
				grid-template-rows:100px 100px 100px auto;
				grid-template-areas: "a a b b"
									 "c c d d"
									 "e e f f"
									 "g g l l";
				background-color: green;
			}

子元素设置 grid-area

			.contaniner div:nth-of-type(1){
				background-color: #008000;
			}
			.contaniner div:nth-of-type(2){
				background-color: #00FA9A;
			}
			.contaniner div:nth-of-type(3){
				background-color: sandybrown;
			}
			.contaniner div:nth-of-type(4){
				background-color: #8B008B;
			}
			.contaniner div:nth-of-type(5){
				background: gray;
			}
			.contaniner div:nth-of-type(6){
				background-color: darkcyan;
			}
			.contaniner div:nth-of-type(7){
				background-color: darkorange;
			}
			.contaniner div:nth-of-type(8){
				background-color: royalblue;
			}
			.contaniner div:nth-of-type(9){
				background-color: deepskyblue;
			}
			.contaniner div:nth-of-type(10){
				background-color: chartreuse;
			}
			.contaniner div:nth-of-type(11){
				background: hotpink;
			}
			.contaniner div:nth-of-type(12){
				background-color: khaki;
			}
			.contaniner div:nth-of-type(13){
				background-color: #FF00FF;
			}
			.contaniner div:nth-of-type(14){
				background-color: cyan;
			}
			.contaniner div:nth-of-type(15){
				background-color: ghostwhite;
			}
			.contaniner div:nth-of-type(16){
				background-color: chocolate;
			}
		</style>

布局结果