本篇文章参考文章
前言
之前写了篇关于 flex布局 的文章，收获了很多志同道合的小伙伴，发现布局问题各位都或多或少遇到过，为了今后我们不再因为布局问题苦恼，所以决定，今天一次性折磨个够，消除恐惧的最好办法就是面对他，奥里给！
一、基本概念
1.1 容器与项目
网格布局和 flex 布局 一样，都引入了一个 容器-项目 的概念，采用网格布局的区域，称为"容器"（ container ）。容器内部采用网格定位的子元素，称为"项目"（ item ）
<div>
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的<p>元素就不是项目。 Grid 布局只对项目生效。
1.2 行与列
容器里面的水平区域称为"行"（ row ），垂直区域称为"列"（ column ）如下图所示：
1.3 单元格与网格线
行和列的交叉区域，称为"单元格"（ cell ）。 n 行和 m 列会产生 n x m 个单元格。
划分网格的线，称为"网格线"（ grid line ）。水平网格线划分出行，垂直网格线划分出列。 n 行有 n + 1 根水平网格线， m 列有 m + 1 根垂直网格线。
二、容器属性
基本概念介绍完了，是不是很简单，就是线，还有列，接下来我们学习下容器的相关属性。
2.1 display属性
display: grid 指定一个容器采用网格布局。这一点很重要，如果没有这个，那我们后面设置的属性都不能生效。
div {
display: grid;
}
设置成栅格布局后，页面元素会变成这样
上面 foo 和 bar 这里代指一些其他元素，类似咱们举例子的时候，张三，李四之类的，这两个单词就是程序界的张三李四。
默认栅格布局是块级元素，当然也可设置成行内元素
div {
display: inline-grid;
}
注意，设为网格布局以后，容器子元素（项目）的 float、display: inline-block、display: table-cell、vertical-align和column-* 等设置都将失效。
2.2 grid-template-columns，grid-template-rows
当我们设置完栅格布局之后，还需要紧接着设置一下，划分成几行，几列。
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
上面的写法有时候很麻烦，如果要 10 行， 10 列，那岂不是要累死。程序员都是懒惰的，绝对不会做机械的重复工作，这个时候可以使用 repeat() 函数。
.container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
上面 repeat() 函数第一个参数表示重复 3 次，第二个参数表示要重复的数值
auto-fill 关键字
有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用 auto-fill 关键字表示自动填充。
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
fr 关键字
为了方便表示比例关系，网格布局提供了 fr 关键字（ fraction 的缩写，意为"片段"）。如果两列的宽度分别为 1fr 和 2fr ，就表示后者是前者的两倍。熟悉 css3 vh vw 的同学应该很好理解。
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
网格线的名称
grid-template-columns 属性和 grid-template-rows 属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。
.container {
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
传统布局
我们传统布局里面，一般左边导航栏，右边展示区，占比大概3：7，用栅格布局只要两行
.wrapper {
display: grid;
grid-template-columns: 70% 30%;
}
2.3 grid-column-gap，grid-row-gap
gap 中文意思 “间隔”，所以顾名思义，这个属性是用来设置行间距，列间距的。
.container {
row-gap: 10px;
column-gap: 10px;
}
还有一种简写方式：grid-gap: <grid-row-gap> <grid-column-gap>;
.container {
gap: 10px 10px;
}
2.4 grid-template-areas 属性
该属性有点类似上面提到的给网格线命名，只不过现在命名的是每一块区域
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
}
上面的9个区域分别命名成了 a-i 。当想合并一些区域的时候，我们可以给他设置成一样的名字，如下：
grid-template-areas: 'a a a'
'a b b'
'c c c';
当某些区域不希望使用到的时候，可以用 (.) 表示。
grid-template-areas: 'a . a'
'a . b'
'c c .';
注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为 区域名-start ，终止网格线自动命名为 区域名-end 。
2.5 grid-auto-flow 属性
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图数字的顺序。
grid-auto-flow: row | column | row dense | column dense;
默认值是 row ，当设置成 column 时，会变成如下样子：
接下来重点来了，该属性还有两个值 row dense 和 column dense ，这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。
比如下面，我们指定了第一个项目和第二个项目分别占据第一列和第二列，那么剩下元素的排列如下：
上图中， 1 号项目后面的位置是空的，这是因为 3 号项目默认跟着 2 号项目，所以会排在 2 号项目后面。
现在修改设置，设为 row dense ，表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。
grid-auto-flow: row dense;
上图会先填满第一行，再填满第二行，所以 3 号项目就会紧跟在 1 号项目的后面。 8 号项目和 9 号项目就会排到第四行。
如果将设置改为 column dense ，表示"先列后行"，并且尽量填满空格。
至于上面提到的，怎么让第一个项目和第二个项目占据第一列，第二列，我们后面讲到项目属性的时候，再详细介绍。
2.6 justify-items，align-items，place-items
justify-items 属性设置单元格内容的水平位置（左中右）， align-items 属性设置单元格内容的垂直位置（上中下）。
- start ：对齐单元格的起始边缘。
- end ：对齐单元格的结束边缘。
- center ：单元格内部居中。
- stretch ：拉伸，占满单元格的整个宽度（默认值）。
.container {
justify-items: start;
}
上面表示项目单元格左对齐
.container {
align-items: start;
}
上面代码表示，单元格内容头部对齐。
place-items 属性是 align-items 属性和 justify-items 属性的合并简写形式。
place-items: <align-items> <justify-items>;
2.7 justify-content，align-content，place-content
justify-content 属性是整个内容区域在容器里面的水平位置（左中右）， align-content 属性是整个内容区域的垂直位置（上中下）。这两个属性使用方法完全一致，只是方向不同，以下就 justify-content 进行展示。
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
上面的 start, end, center, stretch 都比较好理解，分别对应起始，结束，中心位置和拉伸，如下图所示：
- space-around — 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
- space-between — 项目与项目的间隔相等，项目与容器边框之间没有间隔。
- space-evenly — 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
place-content 属性是 align-content 属性和 justify-content 属性的合并简写形式。
place-content: <align-content> <justify-content>
2.8 grid-auto-columns， grid-auto-rows
当一些项目的指定位置，在现有网格的外部时。比如网格只有 3 行，但是某一个项目指定在第 5 行。这时，浏览器会自动生成多余的网格，以便放置项目。
下面设置原本列宽行高为 100px ，自动生成的行高为 50px 。
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-rows: 50px;
}
三、项目属性
3.1 grid-column-start，grid-column-end，grid-row-start，grid-row-end
上面我们介绍 2.5 和 2.8 两个属性的时候，都提到过，给某些项目指定位置。这一操作就需要用到项目属性中的 grid-column-start，grid-column-end 。
项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。
- grid-column-start ：左边框所在的垂直网格线
- grid-column-end ：右边框所在的垂直网格线
- grid-row-start ：上边框所在的水平网格线
- grid-row-end ：下边框所在的水平网格线
.item-1 {
grid-column-start: 2;
grid-column-end: 4;
}
上图中，只指定了 1 号项目的左右边框，没有指定上下边框，所以会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}
除了指定为之外，还可以指定网格线的名字。
.item-1 {
grid-column-start: header-start;
grid-column-end: header-end;
}
这四个属性的值还可以使用 span 关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。
.item-1 {
grid-column-start: span 2;
}
3.2 grid-column，grid-row
grid-column 属性是 grid-column-start 和 grid-column-end 的合并简写形式， grid-row 属性是 grid-row-start 属性和 grid-row-end 的合并简写形式。
.item {
grid-column: <start-line> / <end-line>;
grid-row: <start-line> / <end-line>;
}
.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
斜杠后面的数值省略掉的话，默认跨一个网格
3.3 grid-area 属性
grid-area 属性指定项目放在哪一个区域。还记得 2.4 grid-template-areas 属性不，在这里设置的名字，就可以在 grid-area 里面使用。
.item-1 {
grid-area: e;
}
grid-area 属性还可用作 grid-row-start、grid-column-start、grid-row-end、grid-column-end 的合并简写形式，直接指定项目的位置。
.item {
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
3.4 justify-self，align-self，place-self
justify-self 属性设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致，但只作用于单个项目。
align-self 属性设置单元格内容的垂直位置（上中下），跟 align-items 属性的用法完全一致，也是只作用于单个项目。
.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}
justify-self: start 展示效果如下：
.item-1 {
justify-self: end;
}
place-self 属性是 align-self 属性和 justify-self 属性的合并简写形式。
place-self: <align-self> <justify-self>;
到这里栅格布局的内容基本差不多了，虽然属性众多，但是找到规律还是很好记忆的，规律就是大家一定要学好外语，这些个属性如果在理解单词意思的基础上，简直就跟大白话一样。