学习grid布局就是看的阮一峰老师的文章，然后自己当个搬运工，记录一下grid布局的属性。 传送地址：www.ruanyifeng.com/blog/2019/0…
grid布局又称网格布局，可以想象成是在一块田在种田。父容器需要设置display属性为grid或者inline-grid。（grid会独占一行，inline-grid不会）
图中黑灰色的线就是grid布局的网格线，从左到右有4根，从上到下有4根，所以构成了 3 x 3的网格布局。
子容器必须是父级容器的直接子元素，子元素的float、display: inline-block、display: table-cell、vertical-align 和 column-*等设置会失效。
上面代码如下：
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
<div class="item item-8">8</div>
<div class="item item-9">9</div>
</div>
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.item {
font-size: 4em;
text-align: center;
border: 1px solid #e5e4e9;
}
.item-1 {
background-color: #ef342a;
}
.item-2 {
background-color: #f68f26;
}
.item-3 {
background-color: #4ba946;
}
.item-4 {
background-color: #0376c2;
}
.item-5 {
background-color: #c077af;
}
.item-6 {
background-color: #f8d29d;
}
.item-7 {
background-color: #b5a87f;
}
.item-8 {
background-color: #d0e4a9;
}
.item-9 {
background-color: #4dc7ec;
}
这里对父容器设置了grid-template-rows和grid-template-columns两个属性，就是接下来要讲的对父级容器的属性设置。
对父级容器的属性设置
1. 设置行高和列宽
设置每一行的行高: grid-template-rows （每一行的高度是多少）
设置每一列的列宽: grid-template-columns （每一列的宽度是多少）
（1）绝对单位值：
grid-template-rows: 100px 100px 100px;
表示有3行，每一行的高度都是100px
（2）百分比值：
grid-template-rows: 33.3% 33.3% 33.3%;
（3） 使用repeat参数：
grid-template-rows: repeat(3, 100px);
（4）使用repeat重复某种模式：
grid-template-rows: repeat(3, 100px 50px 20px);
有3行，每一行的高度分别是100px, 50px, 20px
（5） repeat使用auto-fill关键字自动填充：
grid-template-columns: repeat(auto-fill, 100px);
表示每一列的列宽为100px，然后自动填充，直到容器不能放置更多的列
设置值说明：
（1）fr关键字（fraction，片段的意思）
grid-tempalte-columns: 1fr 1fr;
表示两列的宽度都是1fr，可以与绝对长度的单位混用
grid-template-columns: 150px 1fr 2fr;
表示第一列的列宽是150px，第二列的列宽是第三列列宽的一半
（2）minmax()函数：产生一个长度范围，接受两个参数，表示长度在这个范围内，分别是最小值和最大值。
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
这里第三列的列宽在100px到1fr范围之内。
（3）auto关键字：由浏览器自己决定长度
grid-template-columns: 100px auto 100px;
第二列的列宽基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。
2. 网格线名称
对于grid-template-rows 和 grid-template-columns属性，使用方括号对每条网格线进行命名。同一根网格线可以有多个名字。
grid-template-columns: [c1] 100px [c2] 200px [c3] 300px [c4 fourth-line];
第四根网格线有两个名字。
布局实例：两栏布局，三栏布局 使用grid-template-columns实现
3. 行间距、列间距设置
grid-row-gap grid-column-gap
grid-gap: <grid-row-gap> <grid-column-gap>
grid-gap: 10px 30px; 这里将每行的间距设置为10px，每列的间距设置为30px
grid-gap只设置一个值：表示第二个值与第一个值相同
4. grid-template-areas：指定“区域”，一个区域由一个或多个单元格组成。
grid-template-areas: 'a b c' 'd e f' ' g h i'
某些区域不需要的话，使用 （.）表示：
grid-template-areas: 'a . c' 'd . f' 'g . i'
这个属性直接看MDN的解释更加直观：developer.mozilla.org/zh-CN/docs/…
区域命名影响网格线的名字，每个区域的起始网格线叫区域名-start，终止网格线叫区域名-end
5. grid-auto-flow属性：定义容器子元素的放置顺序
默认值是row即“先行后列”，设置成column后，变成“先列后行”。
此属性两种形式取值：
单个关键字：
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
两个关键字：
grid-auto-flow: row dense;
grid-auto-flow: column dense;
dense表示尽可能紧密填满。
6. justify-items 和 align-items属性
justify-items：设置单元格内容的水平位置（左中右）
align-items：设置单元格内容的垂直位置（上中下）
place-items: <align-items> <justify-items>
7. justify-content 和 align-content
justify-content：整个内容区域在容器里面的水平位置（左中右）
align-content：整个内容区域在容器里面的垂直位置（上中下）
place-content: <align-content> <justify-content>
8. grid-auto-columns 和 grid-auto-rows设置浏览器自动创建的多余网格的列宽和行高。
9. grid-template 和 grid 是属性的合并写法。
对每个子元素的属性设置
1. 设置子元素的网格线起始位置和结束位置
gird-column-start：左边框所在的垂直网格线
grid-column-end：右边框所在的垂直网格线
grid-row-start：上边框所在的水平网格线
gird-row-end：下边框所在的水平网格线
这四个属性的值可以使用span关键字，表示“跨越”，即左右边框（上下边框）之间跨越多少个网格。
grid-column 和 grid-row 属性：grid-column是grid-column-start和grid-column-end的合并简写形式，grid-row是 grid-row-start 和 grid-row-end的合并简写形式。
grid-column: <start-line> / <end-line>
grid-row: <start-line> / <end-line>
2. grid-area 指定项目放在哪个区域，还可以用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式：
grid-area: <row-start> / <column-start> / <row-end> / <column-end>
3. justify-self 属性， align-self 属性， place-self 属性
justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。
place-self: <align-self> <justify-self>;
以上，有些也不是很熟悉，纯当学习记录，欢迎指正。
