一、grid布局网格布局的概念和flex布局的区别

含义：它将网页划分成一个个网格，可以任意组合不同的风格，做出各种各样的布局。

区别：Griad布局与Flex布局有一定的相似性，都可以指定容器内部多个项目的位置，但是他们也存在重大区别，Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一堆布局。

Griad布局则是将容器化分成“行”和“列”，产生单元格，然后指定“项目所在的单元格”，可以看作是二维布局，

网格布局案例，不规则布局项目：

二、网格布局中的属性

含义：网格布局中的属性和flex布局中的布局属性类似，分为两类，一类容器属性，一类项目属性。

1、容器属性

（1）触发网格布局

给父元素添加display:griad

display关于网格的取值分为两个，griad(块网格)和inline-griad（行内网格，行内块）

griad表示容器从上向下排列
inline-griad表示容器从左向右排列

（2）行列划分

规定行属性：griad-template-row
规定列属性：griad-template-column

六种取值方式：

方式一：绝对大小

griad-template-row:200px 200px 200px
griad-template-column:200px 200px 200px
1
2

方式二：百分比

griad-template-row:33.33% 33.33% 33.33% 
griad-template-column:33.33% 33.33% 33.33% 
1
2

方式三：功能函数

griad-template-row:repeat(3,33.33%)
参数一：重复的次数
参数二：重复的数值
1
2
3

方式四：auto-fill关键字，自动填充，配合功能函数使用

griad-template-row:repeat(auto-fill.33%)
自动填充行数
1
2

方式五：fr关键字

griad-template-row：1fr 3fr 1fr；
表示比例关系
1
2

方式六：minmax

解释：网格宽度最大200px最小100px，可在区间变化，自适应宽度，如果其他网格大于合适高度，那么会超出父盒子。

第七种方法：auto

自动填满剩余空间

2、间距

//行间距
grid-row-gap:20px
//列间距
grid-column-gap:列间距
//复合式
grid-gap:30px 30px;
1
2
3
4
5
6

3、区域命名与划分 ——设置到父盒子

box{
//前提
display:griad;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
//区域
grid-template-areas:'a e e'
                    'd e e'
                    'g h i'
;
}
.box div:nth-child(1){  #box下第一个div盒子占a区域
grid-area:a;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

注意：合并的区域命名相同，只能实现长方形和正方形。

4、网格排列顺序

排列顺序：

grid-auto-flow: row/column; 改变顺序
# row盒子水平排列
123
456
#column竖直顺序排列
135
246
1
2
3
4
5
6
7

5、网格对齐方式

（1）网格对齐方式（整体）

网格在大容器中的排列方式
设置在最外部大盒子box上

justify-content:start|end|center|space-between|space-around
align-content:start|end|center|space-between|space-around
//复合属性
place-content:<justify-content> <align-content>
1
2
3
4

（2）网格内部项目排列位置

设置在最外部大盒子box上

justify-items:start|end|center|stretch;
align-items:start|end|center|stretch;
//复合属性
place-items:<justify-items> <align-items>
1
2
3
4

stretch默认值，拉伸占满整个盒子

6、行列合并——给网格项目上增加

替代区域命名与划分的方式，直接给内部网格加属性

写法一：
grid-column-start:1;
grid-column-end:3;
表示占一行两列
grid-row-start:1;
grid-row-end:3;
grid-column-start:1;
grid-column-end:3;
表示占两行两列
写法二：
grid-row：1/3；
grid-column：1/3；
1
2
3
4
5
6
7
8
9
10
11
12

网格线：