grid

1、grid布局

display：grid

分隔行

grid-template-rows

分格列

grid-template-columns

单位

px、%、auto、fr（份数）、minmax（最小值，最大值，先取最大值，最大值不够取最小值）

行间距

grid-row-gap：px

列间距

grid-column-gap：px

简写

grid-gap：行  列

内容的位置：边框被内容撑开

justify-items：水平位置

align-items：垂直位置

值：

normal：默认效果

start：

end：

center

stretch：拉伸

简写：place-items：垂直（列对齐）  水平（行对齐）

2、占位布局

父元素 grid-template-areas 定义内容名字和位置

grid-template-areas:
"a a c"
"b b c"
"b b c";

子元素 frid-area：a

设置的内容（子元素）必须是矩形，不能是奇奇怪怪的形状

 3、子元素设置的属性

列分割线的起始位置的结束位置

grid-column-start 列开始

grid-column-end 列结束

行分割线的起始位置的结束位置

grid-row-start  行开始

grid-row-end  行结束

简写

grid-area：行开始/纵开始/行结束/纵结束