GRID网格布局

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。

Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

首先要分清楚容器和项目

1. 采用网格布局的区域，称为"容器"（container）
2. 容器内部采用网格定位的子元素，称为"项目"（item）

一、 Grid 布局的容器属性：

   div { display: grid; }

默认情况下，容器元素都是块级元素，但也可以设成行内元素。 div { display: inline-grid; }

注意，设为网格布局以后， 容器子元素（项目）的 float、display: inline-block、display: table-cell、vertical-align和column-* 等设置都将失效。

二、划分行和列。

grid-template-columns  属性定义每一列的列宽，

grid-template-rows  属性定义每一行的行高。

.container { 
        display: grid;
		grid-template-columns:100px 100px 100px;
		grid-template-rows: 100px 100px 100px;
} 
/*或者*/
.container { 
        display: grid;
		grid-template-columns:33.33% 33.33% 33.33%;
		grid-template-rows: 33.33% 33.33% 33.33%;
} 

（一）repeat()接受两个参数，第一个参数是重复的次数,   第二个参数是所要重复的值。 重复某种模式也是可以的。

.container{
        display: grid;         
        grid-template-columns: repeat(3, 33.33%);         
        grid-template-rows: repeat(3, 33.33%);         
}
.container{
        display: grid;         
        grid-template-columns: repeat(2, 100px 20px 80px); 
/*上面代码定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px*/     
        grid-template-rows: repeat(3, 33.33%);         
}

（二）auto-fill 关键字：自动填充

.container{
        display: grid; 
		grid-template-columns: repeat(auto-fill, 100px); 
} 
/*每列宽度100px，然后自动填充，直到容器不能放置更多的列 */

（三）grid-gap属性，grid-row-gap 属性，grid-column-gap 属性

grid-row-gap属性设置行与行的间隔（行间距）

  grid-column-gap属性设置列与列的间隔（列间距）

（四）grid-column-start 属性：左边框所在的垂直网格线

          grid-column-end 属性：右边框所在的垂直网格线

          grid-row-start 属性：上边框所在的水平网格线

          grid-row-end 属性：下边框所在的水平网格线

（五）span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格

.item-1 { grid-column-start: span 2; }
                        /*或者*/
.item-1 { grid-column-end: span 2; } 

 例子：

<div class="box_1">
	<div class="g1">AAA</div>
	<div class="g2">BBB</div>
	<div class="g3">CCC</div>
	<div class="g4">DDD</div>
	<div class="g5">EEE</div>
	<div class="g6">FFF</div>
	<div class="g7">GGG</div>
	<div class="g8">HHH</div>
	<div class="g9">III</div>
</div>

@charset "utf-8";
/* CSS Document */

*{
 font-size:24px;
 
}
.g1{
	background:#F99;
	grid-column-start: 1;
		grid-column-end: 3; 
	    grid-row-start: 1; 
		grid-row-end: 2;
	}
.g2{
	background: #FC0;
	grid-column-start: 3;
	grid-column-end: 4; 
	grid-row-start: 1; 
	grid-row-end: 2;
	}
.g3{
	background: #6CF;
	grid-column-start: 1;
	grid-column-end: 2; 
	grid-row-start: 2; 
	grid-row-end: 3; 
	}
.g4{
	background: #090;
	grid-column-start: 2;
	grid-column-end: 4; 
	grid-row-start: 2; 
	grid-row-end: 4; 
	}
.g5{
	background: #F9C;
	}
.g6{
	background: #F30;
	}
.g7{
	background: #FF3;
	}
.g8{
	background: #F63;
	}
.g9{
	background: #F60;
	grid-column-start: 1;
	grid-column-end: 3; 
	grid-row-start: 5; 
	grid-row-end: 6; 
	}
.box_1{
	font-family:"微软雅黑";
	font-size:24px;
	display:grid;
	grid-template-columns:100px 100px 100px;
	grid-template-rows: 20% 25% 25% 10% 10%;
	gap: 5px;
}