Grid布局（网格布局）

网格布局（Grid）是 CSS 中一个布局方案。

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

下面这样的布局，就是Grid布局。

 

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

 Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局比 Flex 布局强大。

Grid布局是一个二维的布局方法，纵横两个方向总是同时存在。

作用在grid容器上	作用grid布局子元素上
gri