SS Grid 网格布局可以将网格元素放置在与这些行和列相关的位置上,进而快速、便捷的对页面结构进行布局,提高工作效率
“flexbox” 是一维的布局,是因为一个 “flexbox container” 一次只能处理一个维度上的元素布局,一行或者一列。
相比较 “Grid网格布局”,则是二维布局可以同时处理行和列上的布局
通常适用于布局页面主要的区域布局或小型组件
![](Dimage-20210409104705206.png)
## 兼容
ie10、ie11支持带前缀-ms-
![image-20210414092338875](image-20210414092338875.png)
## 基本概念
### 容器与项目
采用网格布局的区域,称为"容器"(container)。
容器内部采用网格定位的子元素,称为"项目"(item)。
![](容器与项目.png)
### 行和列
容器里面的水平区域称为"行"(row),垂直区域称为"列"(column)。
![](行.png)
### 单元格
行和列的交叉区域,称为"单元格"(cell)
正常情况下,n行和m列会产生n x m个单元格。比如,3行3列会产生9个单元格。
![](单元格-1617932586281.png)
```
正常情况下,n行和m列会产生n x m个单元格。比如,3行3列会产生9个单元格。
```