一、
概述
Grid
布局也称
“网格布局”，是一个
C
SS
的布局方案。跟
flex
有相似性，但是比
flex
强大，
flex
是一维的，只能针对容器的横竖边方向，布局里面的项目；但是
grid
是可以任意组合不同的网格，做出各种各样的布局，是二维的。
二、
基本概念
Grid
是将容器分为行和列，从而进行布局的，在学习相关的属性设置之前，需要了解一些基本的概念。
采用网格布局的块，称为容器，容器内，直接的子元素，，叫做项目，下面容器的属性定位都是对项目进行定位。
最外面的
元素就是容器，里面的
元素就是项目。容器里面的水平区域叫做行，两条线组成一行，竖直区域叫做列，两条线组成一列。
行和列交叉形成的区域，就叫做单元格
组成行，列，单元格的这些分割线就是网格线，行，列，单元格都是由网格线组成的。
三、
容器属性
Grid
的属性分为两类，一类是容器内进行设置，对项目起作用；一类是项目内进行设置，对项目内内容起作用；
容器属性：
1. display:grid//
指定容器的布局方式为
grid
，
采用此布局后，项目的类似什么
float:left
等特殊布局方式都将失效，因为
grid
就是起布局作用的，会把项目内的布局方式给覆盖掉。
Display:inline-grid//
这样设置容器元素为行内元素，容器内仍然采用
grid
布局
。
2. grid-template-columns: xxpx xxpx 50% 2fr 1fr //
这是列的设置，首先有多少项值设置，就代表着有多少列，每一列的宽度对应相应的设置值，设置值可以有多种表达方式，可以是明确的
PX
值，百分比值，
fr(
比例值
)
【
这个用法通常是两项以上设置，然后这几项的宽就是按照比例进行划分，把未指定精确宽度的剩余区域划分完
】
grid-template-rows//
设置行，原理同上
【
grid-template-rows
：
repeat(3
，
100px)
函数，用于以上两个属性值的设置，第一个参数代表几行，第二个参数代表行的高度，这个函数就是用于重复设置，也可
grid-template- columns :repeat(2,100px 20px 50px ),
对模式进行匹配，代表一共有
6
列，每一个模组就重复一次，就是
100
px 20px 50px 100px 20px 50px,
当容器的宽度或者长度不清楚时，也可以利用
repeat(auto-fill,xxpx),
用
auto-fill
把容器以每列宽或高一把填满
】；
auto
关键字，为指定了一些固定的宽或高后，剩余的空间自动分配占满；
网格线还可以指定固定名称，在设置
grid-template-rows/ columns
的值，可以写【
??
】进行设置，直接对应每一条线，
eg: grid-template-rows:[c1] 100px [c2] 100px [c3]
3. grid-gap
：
XXPX XXPX
grid-row-gap
：
xxpx\grid-column-gap
// grid-row-gap
是设置行与行的间隔，
grid-column-gap
是设置列与列的间隔
;grid-gap
是
grid-column-gap
与
grid-row-gap
的合并简写，如果没有书写到第二个值，则默认两个值一样。
4. grid-template-areas
：
’a a a’
‘d d i
‘c c c’//
上方把整个网格分成了四个区域，分别是
a,d,I,c
，
如果没有使用该单元格为区域内的话，则是直接使用
.
表示。此项设置，对项目内设置
了
单个项目大小的，具有作用，可以让一个项目，等于一个区域，区域可以是
N
个单元格，所以项目的大小也可以是
N
个单元格的大小。
5. grid-auto-flow;row/column/row dense/column dense//
此项为设置单元各的排序方式，即各项目的排序方式，因为项目就是按照顺序，排进去每个对应的单元格的。
Row
为默认，先排满行，再排列；
column
为先列后行；
row dense/column dense
为
row/column
的加强版，保证了排列顺序之余，还自动把容器内设置的方向的剩余空间自动占满，尽量不出现空格。
6. justify-content/align-content:start|end|center|stretch|space-around
place-content:align-content justify-content
//
此属性是对，整体项目在容器中的位置进行设置，属性值跟
flex
属性值设置类似，意思也一样；
place-content
是
justify-content/align-content
的合并简写，里面的属性值，就是单独时候的属性值。
7. justify-items/align-items:start|end|center|stretch//
此属性是对项目内的内容位置进行设置，属性值跟
flex
基本一样，是对所有的单元格内内容进行统一设置。
8. grid-auto-columns/grid-auto-rows:xxpx//
此属性为后期添加的，多余的单元格，添加设置值。
四、
项目属性
1. grid-column-start/grid-column-end:1[c1]
grid-row-start/grid-row-end::3[c3]//
这四个属性一起设置属性值，值为第几条线的数字或者是线的名称，代表这个项目占据多少个单元格；
grid-column:n/n+n//grid-column-start/end
的简写形式；
grid-row:n/n+n//grid-row-start/end
的简写形式
2. grid-area:a//
此属性为设置单元格放在哪一个区域内；
3. justify-self/align-self:start|end|center|stretch
place-self
：
align-self justify-self
//
此属性为设置单元格内内容的位置，跟
flex
类似，这个仅对设置了属性的单元格起效。
Place-self
是
justify-self/align-self
的合并简写，如果属性值省略一个值，则会认为两个值一样。
