grid布局

一、容器属性：
display：grid ;网格布局
display：inline-grid ;行内

// 网格列宽
grid-template-columns：100px 100px 100px； 像素
grid-template-columns：33.33% 36.33% 30%; 百分比
grid-template-columns：repeat(3,100px 200px)；repeat函数
grid-template-columns：repeat(auto-fill,100px)； auto-fill自动填充
grid-template-columns: 150px 1fr 1fr; fr表示份数
grid-template-columns: 1fr 1fr minmax(100px, 1fr); minmax表示范围
grid-template-columns: 150px auto 100px; 自适应
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; 方括号指定网格线的名称，方便后期引用

// 网格行高(同上)
grid-template-rows

// 列间距
colums-gap： 20px；
// 行间距
row-gap：20px
// 简写
gap：<row-gap> <colums-gap>

// 用于定义区域
grid-template-areas： "header header header"
"main main sidebar"
"footer footer footer";
如果某些区域不需要利用，则使用"点"（.）表示

// 放置顺序
grid-auto-flow：row；（默认，先行后列）
grid-auto-flow：column；（先列后行）
grid-auto-flow: row dense; (表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。)
grid-auto-flow: column dense;

// 单元格内容对齐方式：水平方向
justify-items: start | end | center | stretch（拉伸）;
// 单元格内容对齐方式：垂直方向
align-items: start | end | center | stretch;
// 单元格内容对齐方式：简写
place-items： <align-items> <justify-items>；

// 容器中的内容对齐方式：水平方向
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: <align-content> <justify-content>；

// 设置浏览器自动生成的网格宽高（与grid-template-columns写法相同）
ps:比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。
grid-auto-rows: 50px;
grid-auto-columns: 50px;

// 简写
grid-template属性：grid-template-columns、grid-template-rows和grid-template-areas

grid属性：grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow

二、项目属性
// 项目位置(可以用网格线的数字，也可以用网格线的名字)
grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线

// span 关键字表示跨越
//简写项目位置
grid-column：<grid-column-start> / <grid-column-end> ;
grid-row: <grid-row-start> / <grid-row-end> ;
grid-area:
（1）指定放在某一区域 ,与grid-template-areas一起用
（2）用作简写：grid-area: <row-start> / <column-start> / <row-end> / <column-end>

// 单个单元格内容位置 : 水平方向
justify-self: start | end | center | stretch;
// 单个单元格内容位置 : 垂直方向
align-self: start | end | center | stretch;
// 单个单元格内容位置 : 简写
place-self: <align-self> <justify-self>;