如何使用grid布局

以下都是写在父元素（grid容器上）

1、grid容器

添加了grid布局的容器默认是块元素。

可以添加display:inline-grid; 改变成为行内块元素。

改变格子排列方向

grid-auto-flow：column；

处理格子的流动方式（了解）

grid-auto-flow：dense；  //可以把多余空间占满

控制内容在容器格子内的排列方式

控制格子的排列，和flex一样，写在父元素上，水平居中、贴边等……，垂直居中、底部对其等……，控制单个元素 justify-self、align-self。

组合简写：place-contenr、place-items、单个控制place-self

2、grid分布格子的几种方法

按要求大小分布格子，可以用px、百分比% 单位：

• grid-template-rows: 100px 100px 100px;                 一行分3个格子，每个盒子占100px。
• grid-template- columns: 100px 100px 100px;         一列分3个格子，每个盒子占100px。
• grid-template-rows: 50% 50%;                                 一行分2个格子，每个盒子占grid容器的50%。
• grid-template- columns: 25% 25% 25% 25%;          一列分4个格子，每个盒子占grid容器的25%。

自动平均分布（自适应容器）：

• grid-template-rows:repeat(3,1fr);                         一行分3个格子，每个盒子占grid容器的1份。
• grid-template- columns:repeat(3,1fr);                  一列分3个格子，每个盒子占grid容器的1份。

repeat(）函数可以重复执行，例如：

• grid-template-rows:repeat(2，100px 50px);
• ‘2’的意思是执行2次。此时一行分布了4个盒子
• 第一行100px
• 第二行50px
• 第三行100px
• 第四行50px

自动平均分布，按比例（自适应容器）：

• grid-template-rows:20px 2fr 20px;                       一行分3个格子，1、3号格子宽度20px，2号格子占剩余空间。
• grid-template-columns:20px 2fr 20px;                 一列分3个格子，1、3号格子宽度20px，2号格子占剩余空间。

自动平均分布，并且限制子盒子最小最大宽高：

• grid-template-rows:repeat(2,minmax(50px,100px));                 一行分2个格子，子盒子最小50px，最大100px。

3、grid容器行、列控制格子间距：

row-gap:10px 每行栅格线10px。

Columns-gap:10px 每列栅格线10px。

gap:20px 10px 每行20px，每列10px。

4、栅格区域布局