Flexbox 是一维布局，只能在一条直线上放置内容区块；

Grid是一个二维布局，根据设计需求将内容区块放置到任何地方。

template 的一种简洁的写法

如图，简写实例

属性值的定义

实际进行编写的顺序

grid可以进行下面所有属性的简写

属性值的定义

如图，控制自动布局算法的工作方式

属性值的定义

使用grid-auto来定义隐式网格轨道

由于网格项过多从而自动增加的网格行，被称为隐式网格轨道，改变行高时，隐式网格轨道是不会发生改变的

可以使用place-content进行简写。先定义列方向在定义行方向

列轴方向的对齐方式

属性值的定义

属性值的定义

justify-content的7个属性值

使用place-items可以对行和列进行简写，此处写在前边的是列的定义，写在后面的是行的定义，只写一个就设置了两个

列项的对齐

如图，属性值的内容

行轴的对齐方式

间隙的定义和写法，如果只写一个那就是行和列使用同一个间隙

如图，实际使用效果

如图简写格式

属性值的定义

如图，简写定义

需要注意的点：

1.每一行需要使用“”进行括起来

2.每一个值对应一个网格单元，不能漏掉任何一个网格单元

3.值与值之间使用空格隔开

4.行与行之间使用回车进行分隔没有其他符号

如图，实际定义的效果，如果名字一样，就会被定义成相同的区块