概述
grid布局是二维，flex是沿轴线的一维布局，grid更强大（强大在对于换行元素，能让他们对齐）；
flex关注内容，不限制宽度，而grid关注布局，限制宽高再去塞内容，所以更适合二维布局，而非单行排列；
由于是二维，所以html结构无需嵌套，拉平就行
基本概念
grid布局的元素盒子叫 容器，内部顶级子元素叫 项目；
容器内水平区域叫 行，垂直区域叫 列；
划分行与列的叫 网格线；
行列交叉区域叫 单元格 (网格)；
<!-- grid结构 -->
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
网格线编号
容器属性
grid属性分为容器属性、项目属性2种；
display属性
表现为grid盒子，项目的float、inline-block、table-cell、vertical-align等会实现
display: grid;
display: inline-grid;
grid-template-columns，grid-template-rows 属性
划分行列，定义宽高
/* 定义3*3的网格，行高列宽均为100px */
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
repeat()
repeat 函数的作用：
简化重复值；
一系列值的模式；
auto-fill：不指定具体行/列数，尽可能多填充；
auto-fit：不指定具体行/列数，项目不够时会占满空网格，而 auto-fill 是尽可能多列，所以不会占满
/* 3*3的网格 */
.container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
/* 系列值：1/4列宽100px，2/5列宽20px，3/6列宽80px */
.container {
display: grid;
grid-template-columns: repeat(2, 100px 20px 80px); /* 注意第2个参数无逗号 */
}
/* 列宽100px，一行内尽可能多地填充列 */
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
fr 关键字
表示行/列的比例关系，比如 1fr 2fr 标签后者是前者2倍
/* 第一列150px，后两列分配剩余空间，第2列是第3列的一半 */
.container {
display: grid;
grid-template-columns: 150px 1fr 2fr;
}
minmax()
限定取值范围，接受参数最小值，最大值：
/* 第3列宽度最小100px，最大1fr */
.container {
display: grid;
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
}
auto 关键字
自动宽度，类似 flex: 1
/* 定义4行高度自动的行 */
.container {
grid-template-rows: repeat(4, auto);
}
网格线名称
在 grid-template-columns 和 grid-template-rows 里可以指定网格线名称，方便引用：
/* 3*3网格，行列分别有4根线，名称可以有多个，如下r4 last-row */
.container {
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4 last-row];
}
简单实现传统布局
通过简单的代码就能实现传统的分栏布局：
/* 两栏布局 */
.container {
display: grid;
grid-template-columns: 70% 30%;
}
/* 12栏等比布局 */
.container {
display: grid;
grid-template-columns: repeat(12 1fr);
}
row-gap，column-gap，gap 属性
旧标准是有
grid-前缀的，比如grid-row-gap；指定行/列间距，gap是他们的简写
<row-gap> <column-gap>
/* 合并写法 */
.container {
gap: 20px 20px; /* 等价于20px，因为不写第2个值的话默认与第1个值相同 */
}
/* 单独设置 */
.container {
row-gap: 20px;
column-gap: 20px;
}
grid-template-areas 属性
用来定义网格的区域，指定各个单元格从属的区域；
不想划分进区域的单元格使用
.标明；指定区域后，区域的行列始末位置网格线会自动命名
*-start/*-end，比如 header 区域，则起始的水平/垂直网格线名称是header-start，结束是header-end；【水平和垂直网格线可以同名吗？】反之亦然，如果指定
*-start*-end网格线，则会自动创建*区域；
/* 将3*3的网格分为header区域、main区域、sidebar区域、footer区域 */
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'header header header'
'main main sidebar'
'footer footer footer';
}
/* 不想利用的单元格用 .号 标明 */
.container {
grid-template-areas: 'a . c'
'd . f'
'g . i';
}
grid-auto-flow 属性
默认项目会按行填充每个网格，可以用 grid-auto-flow 改变填充顺序：
/* 先列后行填充 */
.container {
grid-auto-flow: column;
}
默认是填充不满就换行，如果希望尽可能利用空间，则使用 row dense 或 column dense：
grid-auto-flow: row dense;
justify-items，align-items，place-items 属性
justify-items：设置单元格内容的水平位置
align-items：设置单元格内容的垂直位置
place-items: 二者简写形式，
<align-items> <justify-items>（第2个值省略时默认与第1个值相同）
.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}
justify-content，align-content，place-content 属性
grid容器内部的网格不一定占满grid宽高，所以以上属性可以用来指定整个网格在容器中的位置。
justify-content：水平位置
align-content：垂直位置
place-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;
}
grid-auto-columns，grid-auto-rows 属性
单元格可以指定在网格外，比如3*3网格，指定其中某单元格在第4行，浏览器会自动生成多余的网格；
grid-auto-columns，grid-auto-rows 用来指定浏览器生成的多余网格的宽高；
不指定的话则宽高按单元格内容决定；
/* 指定新增网格的行高50px */
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
grid-auto-rows: 50px;
}
grid-template，grid 属性
grid-template：是
grid-template-columnsgrid-template-rowsgrid-template-areas的简写；grid：是
grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-auto-flow这6者的简写
项目属性
grid-column-start，grid-column-end，grid-row-start，grid-row-end 属性
项目可以设置4个边框依附的网格线，来指定位置：
grid-column-start: 左边框的垂直网格线grid-column-end：右边框的垂直网格线grid-row-start：上边框的水平网格线grid-row-end：下边框的水平网格线若发生项目重叠，则可以使用
z-index指定叠放顺序span关键字的作用是忽略编号，仅关注宽高，位置按默认的来；优点是代码更简洁
/* 指定轴线编号 */
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}
/* 指定网格线名称 */
.item-2 {
grid-column-start: header-start;
grid-row-end: header-end;
}
/* span 关键字，可以用来指定左右边框横跨的网格数量 */
.item-1 {
grid-column-start: span 2; /* 距离右边框2个网格 */
}
grid-column，grid-row 属性
grid-column：grid-column-start 和 grid-column-end 的简写形式；grid-row：grid-row-start 和 grid-row-end 的简写形式
.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;
}
/* 等价的span写法 */
.item-1 {
grid-column: 1 / span 2;
grid-row: 1 / span 1;
}
/* 斜杠后省略的话，则默认跨越1个网格 */
.item-1 {
grid-column: 1 / span 2;
grid-row: 1;
}
grid-area 属性
指定项目放在哪个区域：
/* 指定区域名称 */
.item-1 {
grid-area: e;
}
/* 也可以指定4个边框网格线：<row-start> / <column-start> / <row-end> / <column-end> */
.item-1 {
grid-area: 2 / 2 / 3 / 3;
}
justify-self，align-self，place-self 属性
和容器的 justify-items 一样，设置内容对齐位置，只不过仅作用于项目本身；
place-self：
<align-self> <justify-selft>的简写形式，省略第2个值则默认两者相同
.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}
