关于Grid Layout

.wrapper {

    display: grid;/*产生一个块级的网格*/

    grid-template-columns: repeat(3, 1fr);/*利用空格分隔的值定义网格的列和行。

                                            grid-template-columns和grid-template-rows属性来定义网格中的行和列。这些属性定义了网格的轨道。

                                            一个网格轨道就是网格中任意两条线之间的空间。

                                            值的大小代表轨道的大小，并且他们之间的空格表示网格线*/

    grid-gap: 10px;

    grid-auto-rows: minmax(100px, auto);/*用minmax()作为grid-auto-rows的值。

                                        自动创建的行高将会是最小100px，最大为auto。

                                        用auto意味着行的尺寸将会根据内容的大小来自动变换。*/

  }

  .one {

    grid-column: 1 / 60;/*设置网格项目列方向的开始位置为1的网格线和结束为60的网格线*/

    grid-row: 1;

    background-color: brown/*颜色为brown*/

  }

  .two {

    grid-column: 2 / 4;/*同上*/

    grid-row: 1 / 3;

    background-color:blue

  }

  .three {

    grid-column: 1;

    grid-row: 2 / 5;

    background-color: brown

  }

  .four {

    grid-column: 3;

    grid-row: 3;

    background-color: brown

  }

  .five {

    grid-column: 2;

    grid-row: 4;

    background-color: brown

  }

  .six {

    grid-column: 3;

    grid-row: 4;

    background-color: brown

  }

  /*colum列*/