网格布局的概念，和fex布局的区别
含义:
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局
区别:Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局.
网格布局案例: 不规则布局页面(win窗口)
概念: 容器，项目，行，列，单元格，网格线
网格布局中的属性
含义: 网格布局中的属性和flex中的布局属性类似，分为了两类，一类容器属性;
一类是项目属性
容器属性
1、触发网格布局
给父元素添加display::grid
display关于网格的取值分为两个，grid(块网格)和inline-grid(行内网格，行内块)
grid===容器从上向下排列
inline-grid===容器从左向右排列
2、行列划分
规定行属性: grid-template-row:
固定列属性: grid-template-column:
日有卖
代专的早名小
多小列
1)绝对大小(根据列数或者行数确定值的个数)
例: 200px 200px 200px
grid-template-columns:200px 200px 200px
grid-tempTate-rows:200px 200px 200px
2)百分比 (根据列数或者行数确定值的个数)
例: 33.33% 33.33% 33.33%
grid-template-columns: 33.33% 33.33% 33.33%
grid-template-rows : 33.33% 33.33% 33 .33%
行和列宽
度高度
33.33%
3)功能函数: repeat(0)
repeat(参数1，参数2)
重复的次数
重复的数值或者重复的模式
eg:
grid-template-columns : repeat (3,33.33%) :
等同
grid-template-columns :33 .33% 3333% 33.33%
4)auto-fill关键字( 自动填充配合功能函数使用
grid-tempate-columns: repeat(auto-fi11,33.33%):
当项目宽高固定，容器不固定的情况下，自动填充网格列数
5)fr关键字(列宽片段)
为了方便表示比例关系，网格布局提供了fr关键字(fraction 的缩写，意为"片段")。如果两列的宽度分别为
1fr和2fr，就表示后者是前者的两倍。
grid-template-columns:1fr 3fr 1fr :
grid-template-rows:repeat(3,100px):
6)minmax() 功能函数
grid-template-columns: 1fr 1fr minmax(100px，1fr);
minmax(100px，1fr)表示列宽不小于100px，不大于1fr
7)auto 关键字 自动填充
