网格布局（css）

# 学习目标

 

- 掌握网格常用属性与值

- 能够使用网格完成课堂案例及作用

 

# CSS Grid(网格) 布局

 

CSS Grid 网格布局可以将网格元素放置在与这些行和列相关的位置上，进而快速、便捷的对页面结构进行布局，提高工作效率

 

“flexbox” 是一维的布局，是因为一个 “flexbox container” 一次只能处理一个维度上的元素布局，一行或者一列。

 

相比较 “Grid网格布局”，则是二维布局可以同时处理行和列上的布局

 

通常适用于布局页面主要的区域布局或小型组件

 


 

## 兼容

 

ie10、ie11支持带前缀-ms-

 


 

## 基本概念

 

### 容器与项目

 

采用网格布局的区域，称为"容器"（container）。

容器内部采用网格定位的子元素，称为"项目"（item）。

 


 

### 行和列

 

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。

 


 

### 单元格

 

行和列的交叉区域，称为"单元格"（cell）

 

正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

 


 

```

正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

```

 

 

 

### 网格线

 

划分网格的线，称为"网格线"（grid line）。

水平网格线划分出行，垂直网格线划分出列。

 


 

```

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，

比如三行就有四根水平网格线。

```

 

 

 

## 网格属性

 

Grid 布局的属性分成两类。

一类定义在容器上面，称为容器属性；

另一类定义在项目上面，称为项目属性。

 

## 容器属性

 

### 设置为网格布局

 

- 设置为块级网格

 

```

div {

  display: grid;

}

```

 

- 设置为行级网格

 

```

div {

  display: inline-grid;

}

```

 

注意

 

- 不是网格的直接子元素，不参与网格布局

 

- 设为网格布局以后，容器子元素（项目）的float、display: inline-block、vertical-align和column-*等设置都将失效。

 

### 列宽与行高

 

grid-template-columns网格布局中列的数量（和宽度）

 

grid-template-rows网格布局中行的数量（和高度）

 

#### 语法

 

- 空格隔开的一组值列表

- 其中每个值指定相应列的宽度/行的高度。

 

#### 取值

 

- 默认值 none

 

- 绝对单位px

 

  ```

  grid-template-columns: 100px 100px 100px;

  grid-template-rows: 100px 100px 100px;

  ```

 

- 百分比

 

  ```

  .container {

    display: grid;

    grid-template-columns: 33.33% 33.33% 33.33%;

    grid-template-rows: 33.33% 33.33% 33.33%;

  }

  ```

 

- fr 关键字

 

  ```

  fraction 的缩写,意为部分

  ```

 

  - 弹性系数，按比例分配剩余空间（如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍）

 

  - 可以与绝对长度的单位结合使用

 

    

 

- auto 关键字

 

  关键字表示由浏览器自己决定长度

 

  ```

  grid-template-columns: 100px auto 100px;

  ```

 

- minmax()

 

  - 函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值

 

    即空间不足时以最小以min显示，空间有剩余时最大按max显示

 

    - 注意：如果max值小于min值，则该值会被视为min值。最大值可以设置为fr但最小值则不行

    

    ```

    grid-template-columns: 1fr 1fr minmax(100px, 1fr);

    minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。

    ```

 

- repeat( )函数

 

  - 作用：简化重复的值

 

  - 接受两个参数，第一个参数是重复的次数,第二个参数是所