CSS3的grid布局

grid(网格布局）
    网格布局（Grid）它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局

grid布局的相关概念
    采用网格布局的区域，称为"容器"（container）。
    容器内部采用网格定位的子元素，称为"项目"（item）
    注意：项目只能是容器的顶层子元素，不包含项目的子元素。Grid 布局只对项目生效。

grid布局中的行和列
    1.容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）
    2. 行和列的交叉区域，称为"单元格"（cell）。正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。
    3.划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。
正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

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