简介
Flex 布局是轴线布局，能够说是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，而后指定每一页单元格，能够看作是二维布局。Flex布局和Grid布局不抵触，它们的应用场景是不一样的。
概念
容器和我的项目
采纳网格布局的区域，称为"容器"（container）。容器外部采纳网格定位的子元素，称为"我的项目"（item）。例如：
<div class="container"> <div class="item"><span>1</span></div> <div class="item"><span>2</span></div> <div class="item"><span>3</span></div></div>上述代码中，container就是容器，item就是我的项目，而span不属于我的项目(除非span也设为grid，那么span就是item的我的项目)。
行和列
容器外面的程度区域称为行（row），。垂直区域称为列（column）。
单元格
行与列相交的区域为cell单元格
网格线
划分网格的线，称为"网格线"（grid line）。程度网格线划分出行，垂直网格线划分出列。
失常状况下，n行有n + 1根程度网格线，m列有m + 1根垂直网格线，比方三行就有四根程度网格线。
如果用Chrome浏览器关上调试面板，在构造里能够看到一个grid的标记，点击会显示网格线，并标有相应的序号，如下图所示：
容器属性
display 属性
gird为块级元素，inline-grid为行内元素。
grid-template-columns 和 grid-template-rows
grid-template-columns属性定义每一列的列宽grid-template-rows属性定义每一行的行高。
如图所示：
.container{ grid-template-columns: 100px 50px 100px; grid-template-rows: 50px 100px 50px;}除了应用相对单位，也能够应用百分比。
.container{ grid-template-columns: 20% 30% 50%; grid-template-rows: 20% 30% 50%;}repeat()repeat()承受两个参数，第一个参数是反复的次数，第二个参数是所要反复的值。例如：
.container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px);}也能够反复一组数值：
grid-template-columns: repeat(2, 30px 50px 80px);auto-fill
有的时候，单元格的大小是固定的，然而容器的大小不确定。如果心愿每一行（或每一列）包容尽可能多的单元格，这时能够应用auto-fill关键字示意主动填充。
如果是列填充值大于容器宽度，则换行显示。
如果是行填充的值大于容器高度，则残余的内容将会超出容器。
.container { margin: 20px; width: 600px; height: 300px; display: grid; grid-template-columns: repeat(auto-fill, 250px); grid-template-rows: repeat(auto-fill, 100px);}