CSS3的grid布局

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

grid布局中的行和列
    容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。

grid布局中的单元格
    2. 行和列的交叉区域，称为"单元格"（cell）。正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

grid布局中的网格线
    3.划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。
    正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。
    右图是一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线

Grid布局中添加在容器（父元素）上的属性
    1、display：grid；  display：inline-grid；指定一个容器采用网格布局
    2、grid-template-columns 属性   设置每列的列宽
          A、grid-template-columns: 100px 100px 100px;
          B、grid-template-columns: repeat(3, 33.33%);
               repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。
          C、grid-template-columns: 1fr 1fr;   fr关键字（fraction 的缩写，意为"片段"）
    3、grid-template-rows属性     定义每一行的行高
    4、grid-gap属性是grid-column-gap和grid-row-gap的合并简写，设置行和列间距
    5、place-items：place-items属性是align-items属性和justify-items属性的合并简写形式，设置单元格内容在水平垂直的对齐方式。
        justify-items/align-items: start | end | center | stretch;
    6、place-content属性是align-content属性和justify-content属性的合并简写形式。设置整个内容区域在容器里面的水平和垂直位置。
        place-content: <align-content> <justify-content>。
    justify-content/align-content: start | end | center | stretch | space-around | space-between | space-evenly;
    7、grid-template-areas 属性  网格布局允许指定"区域"（area）
    .container {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
      grid-template-areas: 
                 'a b c'
                     'd e f'
                     'g h i';
    }

Grid项目属性(添加在子级元素上的)
    1、grid-area属性指定项目放在哪一个区域
        grid-area:a1;或者
        grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
    2、place-self  设置项目自己的对齐方式
        place-self是align-self和justify-self的简写
        place-self：start | end | center | stretch；

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