详说grid布局

grid布局

grid一般用来布局整体轮廓；
子元素格式默认是block;(flex默认是inline)
方式：

display:grid;

设置列：

一个grid-template-columns代表一行；
grid-template-columns:auto;
grid-template-columns: 10em 10em 10em;//一行三列，10em是列的宽度

行高：

grid-template-rows: 5em 5em;//有两行，每行的行高是5em;

轨道间距:(只有行列之间的间距，行列的外边是没有的)

gap: 行间距 列间距;
gap: 0.4em 0.5em;//行间距是0.4em,列间距是0.5em
gap: 0.5em 0.5em;可以简写成gap: 0.5em;

网格布局grid中的单位fr(fraction,类似flex中的伸缩因子)

fr倍数

grid-tempalte-columns: 1fr 2fr 1fr;//三列，中间是两遍的二倍宽度

%百分比单位与fr共用（尽量不要同时用）

grid-tempalte-columns: 20% 1fr 20%;//中间1fr的宽度是自适应的

%单位与fr共用的案例说明，fr单位不是固定值，是一种比例单位，跟其他数值类型单位共用时候，先减去数值类型单位的数值，剩下的按fr比例分配。 fr是比例单位，auto 是自适应数值，两者不要同时用：

grid-template-columns: 1fr auto 1fr;//这样auto不知道自适应多少数值，因为fr是一种比例距离。

grid常用函数方式

repeat(重复次数,宽度数值，宽度数值)

repeat 将宽度数值重复
//三列,每列宽度是10em;
grid-tempalte-columns: repeat(3,10em);
//一列10em一列3em，重复三次，共6列
grid-tempalte-columns: repeat(3,10em,3em);

repeat与数值的混合使用

grid-tempalte-columns: repeat(2,1fr) 2fr;//前两列是1fr，最后一个是2fr

minmax(最小值,最大值)

grid-tempalte-columns: 1fr minmax(20em, 2fr) 1fr);
左右两列是1fr，中间一列最小值是20em，最大按fr比例是2fr;

超出部分排列顺序

按行排列（超出部分创建行排列）
grid-auto-flow:row;
grid-auto-rows: 5em;//超出布局的行的行高为5em;
按列排列（超出部分创建列排列）
grid-auto-flow:column;
grid-auto-column: 5em;//超出布局的列的宽度为5em;

网格操作grid-area

网格坐标从左上角开始为1,1,到右下角的方向/相反则为负数

//选中要操作的网格
grid-area: 起始行 / 起始列 / 结束行 / 结束列;
grid-area: 2 / 2 / 3 / 3;
//放到坐标位置
grid-area: 1 / 1 / 2 / 2;
//默认项目是一行一列
grid-area: 1 / 1;
如果要跨1行或1列以上，就不能省略
//用span表示跨越的行数或列数
grid-area: 1 / 1 / span 2 / span 3;
当前位置可以省略
grid-area: span 1 / span 3;
如果省略行：grid-area: auto / span 3;//默认是1行
只写一个grid-area: span 3;选中的是一列的三行,因为行与列的默认值都是1