关于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列*/
上一篇:JavaScript -基础- 函数与对象(三)正则、Match对象


下一篇:Writing buffer overflow exploits - a tutorial for beginners