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个单元格。

```