Grid网格布局

前端戒律：

1.在进行布局时不要将页面写死，即设置固定的width和height，除非特殊说明

2.在设置margin和padding时，除非特殊说明，尽量不要写在一起

Grid网格布局：

它将网页分成可以任意组合的网格，以便设计各种各样的布局

Grid布局的属性分为容器属性和项目属性

容器：需要添加网格布局的父元素

项目：项目的容器采用网格定位的子元素

网格线：n行有n+1跟水平网格线；m列有m+1根垂直网格线

注意：设为网格布局以后，容器项目的float，display：inline-block，display：table-cell，vertical-align和column等设置都将失效

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

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

grid-auto-flow 属性：

grid-auto-flow属性，默认值是row，即"先行后列"；也可以将它设成column，变成"先列后行"

row dense:表示"先行后列"，