最强大的布局方案——网格Grid布局万字详解

Grid 布局又称网格布局，是W3C提出的一个二维布局系统，它与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。目前为止Grid布局是CSS中最为强大的布局方案。

一、基础概念与浏览器支持

截止目前为止许多浏览器都提供了对 CSS Grid 的原生支持，而且无需加浏览器前缀：Chrome（包括 Android ），Firefox，Edge，Safari（包括iOS）和 Opera 。 另一方面，Internet Explorer 10和11也支持Grid布局，但是是以一个过时的语法实现。

各大主流浏览器对于Grid布局的支持情况如下图所示：

PC端浏览器：

学习CSS Grid布局前，我们先需要了解以下基础概念：

1、网格容器(Grid Container)

采用Grid 网格布局的元素称为网格容器，即应用display: grid的元素。

2、网格项目(Grid Item)

网格容器内部采用Grid 网格布局的直接子元素即为网格项目，注意网格项目的子元素不再是网格项目，举个