Grid网格布局

🦉
grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。
px % repeat() fr
🦉
grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。
grid-gap: ;
grid-gap: 20px 20px;
如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值。
❤️根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap。
🦉网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。
grid-template-areas: “header header header”
“main main sidebar”
“footer footer footer”;

🦉justify-items属性设置单元格 内容 的水平位置（左中右）
align-items属性设置单元格 内容 的垂直位置（上中下）。
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items属性是align-items属性和justify-items属性的合并简写形式。
place-items: ;
🦉justify-content属性是 整个内容区域 在容器里面的水平位置（左中右）
align-content属性是 整个内容区域 的垂直位置（上中下）。