CSS中的grid网格布局

Grid布局与Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局

Grid布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局

既可以设置容器为块元素(display:grid)，也可以设置容器为行内元素(display:inline-grid)

设为网格布局以后，容器子元素的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效

设置容器网格的列宽和行高

grid-template-columns：定义每一列的列宽

grid-template-rows：定义每一行的行高

既可以使用绝对单位，也可以使用百分比

以下代码指定了一个三行三列的网格，列宽都是33.33%，行高都是100px
.box {
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-rows: 100px 100px 100px;
}

auto关键字表示由浏览器自己决定长度
grid-template-columns: 100px auto 100px;
第2列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度

repeat()函数

有时候，重复写同样的值非常麻烦，可以使用repeat()函数，接受两个参数，第一个是重复的次数，第二个是所要重复的值

.box {
    display: grid;
    grid-template-columns: repeat(3, 33.33%);
    grid-template-rows: repeat(3, 100px);
}

repeat()也可以重复某几个固定顺序的值
grid-template-columns: repeat(2, 100px 20px 80px);
表示把100px 20px 80px这三个固定顺序的值重复两次，即6列，第1列和第4列都是100px列宽

auto-fill关键字，表示自动填充，如果单元格的大小是固定的，但是容器的大小不确定，我们希望容纳尽可能多的单元格，此时使用auto-fill关键字
.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
}
上例表示列宽为固定100px，我们不确定这个容器多宽，如果宽320px，那个会放置3列，如果宽变为610px，会放置6列。

fr关键字：

为了方便表示比例关系，网格布局提供了fr关键字(fraction的缩写，意为"片段")

如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

grid-template-columns: 1fr 1fr 2fr;
表示3列，其中第1列和第2列宽度相同且都是第3列的一半

可以与绝对长度的单位结合使用：
grid-template-columns: 100px 1fr 2fr;
表示3列，其中第1列固定100px，第2列和第3列会占满剩余空间且，第2列是第3列的一半

minmax(min,max)函数

产生一个长度范围，表示长度就在这个范围之中

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
表示第3列宽不小于100px，不大于1fr。

网格线的名称

grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用

grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4 row-4];
指定网格布局为3行3列，因此有4根垂直网格线和4根水平网格线
方括号里面是这八根线的名字，允许同一根线有多个名字，如[r4 row-4]

设置容器网格的列间距和行间距

row-gap：设置行间距
column-gap：设置列间距
gap：是row-gap和column-gap的合并形式，如果省略了第二个值，默认认为等于第一个值

合并单元格

一个区域由单个或多个单元格组成

grid-template-areas属性用于定义区域

grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'name1 name2 name3'
                     'name4 name5 name6'
                     'name7 name8 name9';
上面代码首先划分出9个单元格，然后给每个单元格命名，名称相同代表是一个区域
grid-template-areas: 'head-left head-left head-right'
                     'main-left main-left main-right'
                     'main-left main-left footer';

如果某些区域不需要利用，则使用"点"（.）表示
grid-template-areas: 'a . c'
                 'd . f'
                 'g . i';
中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域

区域的命名会影响到网格线

每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end

grid-template

是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式，从易读易写的角度考虑，建议不要合并属性

容器的子元素排列顺序

grid-auto-flow属性

row："先行后列"，默认值，先填满第一行，再开始放入第二行
column："先列后行"，先填满第一列，再开始放入第二列
row dense和column dense两个值表示首先指定排列顺序，然后排满当前行或列之后的元素尽可能紧密填满，尽量不出现空格

下面两个图片是row和row dense的实际效果图

所有单元格作为一个整体相对容器的对齐方式

justify-content：水平对齐方式

align-content：垂直对齐方式

start | end | center | stretch | space-around | space-between | space-evenly;

stretch：单元格大小没有指定时，拉伸占据整个网格容器。 
space-around：每个单元格两侧的间隔相等(单元格之间的间隔比单元格与容器边框的间隔大一倍) 

space-between：单元格之间的间隔相等，单元格与容器边框之间没有间隔

space-evenly：单元格之间、单元格与容器边框之间是同样长度的间隔

place-content是align-content和justify-content的合并形式，省略第二个，默认与第一个值相等

每个单元格内容的对齐方式

justify-items：水平对齐方式(start | end | center | stretch)，默认stretch(拉伸，占满单元格)

align-items：垂直对齐方式(start | end | center | stretch)，默认stretch(拉伸，占满单元格)

place-items是align-items和justify-items的合并形式，省略第二个，默认与第一个值相等

自动创建新单元格

有时单元格不够用，这时浏览器会自动生成新的网格

grid-auto-columns和grid-auto-rows用来设置自动创建的新的网格的列宽和行高

grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式

从易读易写的角度考虑，建议不要合并属性。

指定元素的位置

通过网格线指定：

grid-column-start：元素左边框的网格线
grid-column-end：元素右边框的网格线
grid-row-start：元素上边框的网格线
grid-row-end：元素下框的网格线
这4个属性的值可以是数字表示第几根网格线，也可以是网格线名字。
.item {
  grid-column-start: 2;
  grid-column-end: 4;
}
以上代码表示该元素的左边框是第2根垂直网格线，右边框是第4根垂直网格线，没有指定上下边框，会采用默认位置
除该元素外其他元素都没有指定位置，由浏览器自动布局，这时它们的位置由容器的grid-auto-flow属性决定
这4个属性的值还可以使用span关键字，表示跨越多少个网格
.item {
    grid-column-end: span 2;
}
表示该元素左边框距离右边框跨越2个网格

grid-column是grid-column-start和grid-column-end的合并形式grid-row是grid-row-start和grid-row-end的合并形式

值的格式为：<start-line> / <end-line>(两个值之间有一个斜杠)，斜杠及后面的部分可以省略，默认跨越一个网格

通过区域名指定：

grid-area属性指定元素放在哪一个区域，可以直接指定区域名也可以用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

指定单个元素的对齐方式

justify-self：水平对齐方式(start | end | center | stretch)

align-self：垂直对齐方式(start | end | center | stretch)

place-self：是align-self属性和justify-self属性的合并简写形式

以上三个属性分别覆盖justify-items，align-items和place-items，用法相同