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；

网格布局示例

示例效果图： 

示例代码： 

<style>
  /* item1作为头部，设置区域名称为header */
  .item1 {
    grid-area: header;
  }
  /* item2作为菜单，设置区域名称为menu */
  .item2 {
    grid-area: menu;
  }
  /* item3作为主要内容区域，设置区域名称为main */
  .item3 {
    grid-area: main;
  }
  /* item4作为右部分，设置区域名称为right */
  .item4 {
    grid-area: right;
  }
  /* item5作为页脚部分，设置区域名称为footer */
  .item5 {
    grid-area: footer;
  }
  .grid-container {
    display: grid;
    width: 85%;
    margin: auto;
    height: 80%;
    /* 用grid将网格容器划分为三行六列，通过引用区域名称来设置 */
    /* 解析：
      header为第一行，横跨六列
      menu从第二行第一列开始，纵跨两行
      main从第二行第第二列开始，横款三列
      ...
    */
    grid:
      "header header header header header header"
      "menu main main main right right"
      "menu footer footer footer footer footer";
    /* 设置网格元素之间的间隔 */
    grid-gap: 10px;
    /* 设置网格每个行的高度 */
    grid-template-rows: 100px 700px 100px;
    /* 设置网格每个列的占比系数 */
    grid-template-columns: 2fr 3fr 3fr 3fr 1fr 1fr;
    background-color: #2196f3;
    padding: 10px;
  }
  .grid-container > div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
  }
</style>

<div class="grid-container">
    <div class="item1">头部</div>
    <div class="item2">菜单</div>
    <div class="item3">主要内容区域</div>
    <div class="item4">右侧</div>
    <div class="item5">底部</div>
</div>