他可以将页面分为多个网格，可以任意组合不同的网格 ，做出各种各样的布局。
网格布局为二维性质的。
grid-row-gap:1rem ;行间距
** grid-column-gap: 1rem ;列间距**
** grid-gap: 1rem;**设置行列间距
设置容器的列宽和与行高**grid-template-columns: ;**列宽和列数
**grid-template-rows: ;**行宽与行数
取值：一组空格代表一组值（几个值就是几行or列）
取值的方式
px
grid-template-columns: 70% 30%; 百分比
grid-template-columns: 1fr 1fr 1fr;按比例分配剩余空间
grid-template-columns: repeat(3, 1fr);函数法（列数，列宽）
grid-auto-rows: minmax(100px ,auto);
minmax(最小值，最大值)
容器空间不足时，最小按指定的最小值显示
容器空间有剩余，最大按指定的最大值显示
**justify-content水平位置
align-content 垂直位置**
start网格线的起始区域对齐end网格线的结束区域对齐center行轴线的中心区域对齐stretch为默认值 对于单个欣喜的泥猴桃进行设置self
align-selfjustify-self具体属性同上 实现跨行跨列
grid-column
grid-row
如 grid-column: 1/3;（起始，中止）
定义网格模板
grid-area属性指定项目放在哪一个区域
使内容规范