grid布局被称为弹性布局，是CSS3中新增内容
创建grid盒子
display: grid;
grid-template-columns 属性，grid-template-rows 属性
grid-template-columns属性设置定义每一列的列宽，grid-template-rows属性设置定义每一行的行高
1.【默认写法】
grid-template-columns: 33.3% 33.3% 33.3%; /*3列，每一列的宽度占33.3%*/
grid-template-rows: 33.3% 33.3% 33.3%; /*3行，每一行的高度占33.3%*/
2.【借助repeat()】
grid-template-columns: repeat(3, 33.33%); /*更加简洁*/
grid-template-rows: repeat(3, 33.33%);
3.【借助 auto-fill 关键字】
grid-template-columns: repeat(auto-fill, 100px); /*适合单元格大小固定，但容器大小不确定*/
4.【借助 fr 关键字】
grid-template-columns: 1fr 1fr; /* fr 比例 1:2*/
grid-row-gap 属性，grid-column-gap 属性
grid-row-gap 属性设置行间距，grid-column-gap 属性设置列间距
grid-row-gap: 20px; /*设置行列间距均为20px*/
grid-column-gap: 20px;
grid-auto-flow 属性 定义各元素排列顺序
grid-auto-flow: row; /*先行后列*/
grid-auto-flow: column; /*先列后行*/
justify-items 属性，align-items 属性
justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
start：对齐单元格的起始边缘
end：对齐单元格的结束边缘
center：单元格内部居中
stretch：拉伸，占满单元格的整个宽度（默认值）
（justify-items: start）
justify-content 属性，align-content 属性
justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
（justify-content: center）
