CSS Grid 网格布局

提示：grid布局容器子元素的float、display: inline-block、display: table-cell、vertical-align和column-*等将失效。

//设置为grid布局
display: grid;

//网格高宽
grid-template-columns: px | % | 1fr (占剩余空间份数) | minmax(不小于，不大于) | repeat( 重复的次数 | auto-fill (自动填充) , px | % ) | auto; // 每一列的列宽(多个值)
grid-template-rows: px | % | 1fr (占剩余空间份数) | minmax(不小于，不大于) | repeat( 重复的次数 | auto-fill (自动填充) , px | % ) | auto; // 每一行的行高(多个值)

//网格间距
row-gap: 20px; // 行间距
column-gap: 20px; // 列间距
gap: 20px 20px; // 简写(省略了第二个值，第二个值等于第一个值)

//区域名称
grid-template-areas: "header header header" // 区域布局，区域不需要使用" . "表示
                     "main main sidebar"
                     "footer footer footer";

//网格使用顺序
grid-auto-flow: column | row | row dense | column dense; // 列 | 行 | 先行后列(尽可能填满) | 先列后行(尽可能填满)

//单元格内容位置
justify-items: start | end | center | stretch; // 左 | 中 | 右 | 默认
align-items: start | end | center | stretch; // 上 | 中 | 下 | 默认
place-items: start end; // 简写(省略了第二个值，第二个值等于第一个值)

//整个内容区域位置
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
place-content: space-around space-evenly; // 简写(省略了第二个值，第二个值等于第一个值)


//项目属性：
//所在网格线
grid-column-start: 2 | header-start | span 1;  // 左边框: 为第几个边框 | 边框名称 | 跨越多少个网格
grid-column-end: 4 | header-end; // 右边框: 为第几个边框 | 边框名称
grid-column: 2 / 4; // 简写
grid-row-start: 1 | header-start | span 2; // 上边框: 为第几个边框 | 边框名称 | 跨越多少个网格
grid-row-end: 2 | header-end; // 下边框: 为第几个边框 | 边框名称
grid-row: 1 / 2; // 简写

//所在区域
grid-area: header | 1 / 2 / 2 / 4; // 区域名 | 区域网格线

//项目内容位置
justify-self: start | end | center | stretch;// 左 | 中 | 右 | 默认
align-self: start | end | center | stretch;// 上 | 中 | 下 | 默认
place-self: start end;// 简写(省略了第二个值，第二个值等于第一个值)