1224 grid网格布局及属性

一、grid布局

1、grid布局又称二维网格布局，与flex不同的是它是一个二维的基于网络的布局。
2、网格容器：通过display：grid;来创建一个网格容器。
3、此网格容器中一代子元素称为网格元素并且都变成块元素。
4、网格单元：是由一个或多个单元格组成的，有”单元格”和”网格区域”两种形式。
5、网格轨道：根据排列的方向分为“行轨”和“列轨”。
6、轨道间距：容器中轨道之间的距离，有“行轨间距”和“列轨间距”。
7、设置轨道宽度时可以使用一个新的单位：fr（fraction）,类似flex中的伸缩因子。
8、注意：auto fr % 都是相对单位，都可以触发自动计算机制，尽可能不要同时出现。

二、grid(网格布局)的常用属性

1、设置轨道的列宽：3列（几个参数为几列）
grid-template-columns: 10em 10em 10em;
2、设置轨道的行高：2行（几个参数为几行）
grid-template-rows: 5em 5em;
3、设置轨道的间距：水平 垂直（当水平与垂直参数值一样时可简写为一个值）
gap: 1em 2em; 或 gap: 1em;
4、grid中的函数使用
4.1 函数 repeat()：
grid-template-columns:repeat(3,10em);与grid-template-columns: 10rem 10rem 10rem;相等。
第二个参数可以是多个值：
grid-template-columns:repeat(3,10em,2em);
解释：10em,2em重复出现3次。
grid-template-columns:repeat(3,1fr,2fr);
混合使用：
grid-template-columns:repeat(2,1fr)2fr;
展开为：
grid-template-columns:1fr 1fr 2fr;
4.2 函数 minmax()
grid-template-columns:1fr minmax(20em ,2fr) 1fr;
解释：中间列，最小宽度是20em，最大宽度是左右的2倍。

grid容器中项目的常见属性

1、自定义项目在容器的显示位置：grid-area
grid-area: 1 / 1 / 2 / 2;
解释：将项目放入到第一个网格单元中
2、项目跨越两行三列
grid-area: 1 / 1 / span 2 / span 3; 用span更直观
grid-area: span 2 / span 3; 如果从当前位置跨行，起始行号可以省略
总结：grid-area:参数数量不同，意义不同
1.值中只有span
1.1单值：跨的行数
1.2双值：跨的行与列数，如果只想设置列数，就必须设置行数(auto)
2.值中有span和编号
2.1双值：没有span，默认跨1行1列，grid-area：2/3
2.2三值：省了列结束编号或跨的数量，此时前面的值可使用auto
2.3四值：最完美