css grid是二维布局方式可以同时控制行和列的排布，和对齐方式。
grid由水平线和垂直线构成
display:grid;
grid-template-columns:1fr 1fr 1fr; 也可以设置宽度
column-gap: 24px; 设置列间距
row-gap: 24px; 设置行间距
gap: 24px 24px; 统一设置间距
align-items:conter || end ; 水平方向对齐
justify-item: center || end || space-between; 垂直方向对齐
------------------
如果行轨道和列轨道的尺寸小于grid容器，可以对轨道进行对齐
align-content:center || end; 水平方向对齐
justify-content: center || end || space-between; 垂直方向对齐
grid-template-areas：//设置区域
