css总结15（网格布局）

前言

(1) 和flex布局类似，首先需要使用display:grid将容器设置为网格容器，然后结合相关的网格布局属性来实现网格布局；
(2) 网格布局中有一些新概念要着重认识，网格轨道、fr单位、区域名称

新概念

### 网格轨道
网格轨道即在网格容器中定义的行和列，通过前面已学过的repeat(n,value)函数我们可以定义多个相同的轨道片段

### fr单位
fr单位用于定义网格容器中行或列的比例。与其他单位不同，fr单位不是基于固定的像素或百分比，而是基于可用空间的比例

### 区域名称
区域名称是一种用于标识网格容器中子元素位置的方法。通过为网格容器中的子元素指定一个区域名称，我们可以更加灵活地布局网格容器，同时也可以让代码更加易于维护

网格布局属性

### 1. 行与列的数量与尺寸
## grid-template-columns: *col-width
设置列数和列宽度，每个参数代表每个列的宽度，参数的个数即列的个数。
## grid-template-rows: *row-height
设置行数和行高度，每个参数代表每个列的高度，参数的个数即行的个数。
## grid-template：*row-height / *column-width
设置行与列的数量与尺寸

### 2. 元素行与列的始末位置和合并
## grid-column-start：column-start
设置元素的列起始位置
auto：默认值，按流设置
span n：设置元素跨n列
column-n：设置从第几列开始显示元素
## grid-column-end：column-end
设置元素的列结束位置
auto：默认值，跨一列
row-n：设置在第几列结束显示元素
span-n：设置元素跨n列
## grid-column：column-start column-end
设置元素列的起始和结束位置的简写形式
## grid-row-start: row-start 
设置元素的行起始行位置
auto：默认值，按流设置
span n：设置元素设置元素跨n行
column-n：设置从第几行开始显示元素
## grid-row-end: row-end
设置元素的行结束行位置
auto：默认值，跨一行
row-n：设置在第几行结束显示元素
span-n：设置元素设置元素跨n行
## grid-row: row-start row-end
设置元素行的起始和结束位置的简写形式
## grid-area: row-start column-start row-end column-end
设置元素行和列的起始和结束位置的简写形式(注意该属性还可以用于定义区域名称)

### 3. 行与列的间隔
设置网格布局的间隔有两大属性类，第一类就是布局通用的gap，第二类就是grid-gap是网格布局中独有的
## row-gap: row-gap
设置每行之间的间隔
## column-gap: column-gap
设置每列之间的间隔
## gap: row-gap column-gap;
设置行和列间隔的简写，先行再列
## grid-gap-row: row-gap
设置每行之间的间隔
## grid-gap-column: column-gap
设置每列之间的间隔
## grid-gap: row-gap column-gap;
设置行和列间隔的简写，先行再列

### 4. 行和列的默认尺寸和流动
## grid-auto-columns：
设置列的默认宽度
auto：默认值，由网格容器的大小决定
max-content：由列中最大元素设置每列大小
min-content：由列中最小元素设置每列大小
minmax(min,max)：在min~max之间
length：使用具体值设置列的大小
## grid-auto-rows：
设置行的默认高度
auto：默认值，由网格容器的大小决定
max-content：由行中最大元素设置每行大小
min-content：由行中最小元素设置每行大小
minmax(min,max)：在min~max之间
length：使用具体值设置列的大小
## grid-auto-flow：
设置元素的流动方向和堆积方式
row：默认值，通过填充每一行来放置网格元素，必要时添加新行
column：通过填充每一列来放置网格元素，必要时添加新列
row dense：按行填充前面留下的空白区域
column dense：按列填充前面留下的空白区域
dense：按行或列填充前面留下的空白区域

### 5. 区域名称
需要在子元素中使用grid-area:area_name来定义区域名称，然后在父容器中使用grid-template-areas：*cited-area-name或grid-template或grid: *area-name来引用区域名称实现布局；
## grid-area: area-name
设置元素的区域名称
## grid-template-areas: *cited-area-name
通过引用区域名称来设置行列
其中可以使用“.”占位来表示空白区域。
## grid-template: *cited-area-name
通过引用区域名称来设置行列
其中可以使用“.”占位来表示空白区域。
## grid: *cited-area-name；
通过引用区域名称来设置行列
其中可以使用“.”占位来表示空白区域。
## 示例：
例如：grid: "header header header" "menu content content" "menu footer fotter"；
解析：一共引用了四个区域名称(分别对应四个子元素)，header区域在第一行，横跨三列，menu区域在第二行第一列开始向下纵跨两行，content区域在第二行第二列开始向右横跨两列，footer区域在第三行第二列开始向右横跨两列

## 6. grid简写：
同时定义网格容器和网格元素的位置、大小和定义网格区域名称。
# (1) 设置列和行
grid: template-rows / template-columns
# (2) 指定行的尺寸（高度），以及自动布局算法怎样运作，和列的自动尺寸
grid: template-rows / auto-flow auto-columns
# (3) 指定自动布局算法怎样运作，和行的自动尺寸，以及设置 grid-template-columns 属性
grid: auto-flow auto-rows / template-columns
# (4) 引用网格区域名称来布局 
grid: *cited-area-name；

网格布局示例

示例效果图： 

示例代码： 

    
头部
    
菜单
    
主要内容区域
    
右侧
    
底部