持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情
grid最早接触是在使用bootstrap框架中，其中的栅栏不居中，基本思想就是通过把页面进行行和列的划分，再进行精准的布局，和flex布局类似都是容器+项目这样形式进行设置的，但是相比较flex布局其功能更加的强大，但是使用起来也更加的复杂。
容器属性
display：grid;
开启grid布局（和display：flex一样），同时其容器的子元素的float和display：inline-block,table-cell和vertail和colum-等属性设置都会失效。
grid-template-column和grid-template-rows属性
既然是指定行列后来进行布局，那么自然就要先进性指定行列的大小，这两个属性就是对应的设置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="contain">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
</div>
</body>
</html>
<style>
.contain{
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.item{
background-color: red;
border: 5px solid white;
}
</style>
可以发现通过上面的代码我们就很简单的实现了一个3×3的网格了。
这两个属性在设置的时候，除了可以设置为具体的数值，还可以设置为百分比如：grid-template-column:33% 33% 33%，
同时想我们举的这个例子一样，他数值上存在重复的数值，我们可以直接用repeat来进行设置，改函数接受两个参数，第一个是重复的次数，第二个参数是设置其遵循的模式，如grid-template-column:repeat(3,100px);就和我们例子是等价的，所谓模式就是跨域较为复杂一点，如grid-template-column:repeat(3,100px,20px,20px);那么它对应就有9列，大小以100px,20px,20px这样重复。
常用关键字
auto-fill，这样设置后其就会一行尽可能的多放置单元项目，直至放不下为止。fr这个就和flex的flex：1;很像，设置对应1每个项所占用的比例，如grid-template-columns:1fr,2fr,那么一列就有两个，宽度比为1:2；其可以和px一起使用，那么就可以达到固定几行大小，其他行自适应的效果。- minmax()这个函数是设置一个长度方位，其一共要接受两个参数，第一个参数表示最小值，第二个是最大值，如：
minmax(100px,200px)就是最小为100px，最大为200px - auto其表示大小有浏览器自己决定
给网格线设置名称
为了后面使用每根分割线更加的容易，我们还可以给线起名字，只用在每一条线条的前面用[]语法来进行设置，如grid-template-columns:[c1] 100px,对应第一条就叫做c1，一条线条还可以有多个名字，我们只要在数组中继续写其他的名字就可以了，注意是用空格进行分割：[name1 name2 ...];
row-gap、column-gap、gap
这个是设置行列之间的间隔的属性，row对应行，column对应列，而grid-gap则是它们两个的简写，基于习惯就是先行后列，如row-gap:20px column-gap:20px;等价于gap:20px 20px;注意对应顺序，先行后列。
grid-auto-flow
这个属性是用于设置行列排列的顺序，我们不进行设置默认是先行后列，其可选有column，row,row dense ,column dense分别是按列，行，行并且尽量紧密，列并且尽量紧密。
justify-items、align-items、place-items
这三个对应设置单元格内容对应的水平位置、垂直位置，水平+垂直位置。它们的可选值如下：
- start：对齐单元格的起始边缘。
- end：对齐单元格的结束边缘。
- center：单元格内部居中。
- stretch：拉伸，占满单元格的整个宽度（默认值）。
justify-content、align-content、place-content
这个是设置内容区域在容器中的位置，可取值和上一个一样。
grid-auto-columns， grid-auto-rows
有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。
grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。
grid-template-areas 属性
这个可以设置对应每一块的名字，方便下面项目属性的时候用。
grid-template-areas: 'a b c'
'd e f'
'g h i';
