1.网格布局(grid):
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局;
2.基本概念：
容器和项目，如图所示：
<div class="content">
<div class="b">1</div>
<div class="b">2</div>
<div class="b">3</div>
<div class="b">4</div>
<div class="b">5</div>
<div class="b">6</div>
<div class="b">7</div>
<div class="b">8</div>
<div class="b">9</div>
</div>
.content即为容器，.b即为项目。
行和列： 行：row；
列：column；
3.容器属性
display:grid; //默认是块元素；
display:inline-grid; //行内块元素
指定一个容器采用网格布局；
注意：设置为grid后，子元素的float,display: inline-block,display: table-cell、vertical-align和column-*等设置都将失效。
.content {
box-shadow: 0 0 1px #f6f;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}4.属性解释
grid-template-columns：定义每一列的列宽；
grid-template-columns：100px 100px 100px; //总共三列，每列列宽是100px；=
grid-template-rows：定义每一行的行高；
grid-template-rows：100px 100px 100px; //从上至下，每行高度为100px；
//除了使用像素，还可以使用百分比；
拓展：
重复写值很麻烦，可以用repeate函数；
repeat(次数，大小)；
例如：repeat(3,100px); //重复3次，每次100px；
