zoukankan      html  css  js  c++  java
  • grid layout

    .wrapper {
      display: grid;/*grid:网格,这里指使用网格形式显示*/
      grid-template-columns: repeat(3, 1fr);/*grid-template-columns:指定网格中的列数及列的宽度 repeat CSS函数表示跟踪列表的重复片段,允许以更紧凑的形式编写大量显示反复出现的模式的列或行。 fr:是单位(等分)*/
      grid-gap: 10px;/*这里gridgap:指网格的间隔或空隙有10个像素*/
      grid-auto-rows: minmax(100px, auto);/*minmax():CSS函数定义大小范围。宽度自适应 auto:自适应度 这里行的最小100个像素,最大跟随其他指标改变而改变 */
    }
    .one {
      grid-column: 1 / 3;/*第一个网格的列(宽)成为1/3*/
      grid-row: 1;/*行(长)为1各单位*/
    }
    .two { 
      grid-column: 2 / 4;
      grid-row: 1 / 3;
    }
    .three {
      grid-column: 1;
      grid-row: 2 / 5;
    }
    .four {
      grid-column: 3;
      grid-row: 3;
    }
    .five {
      grid-column: 2;
      grid-row: 4;
    }
    .six {
      grid-column: 3;
      grid-row: 4;
    }
  • 相关阅读:
    Circular vector
    【杂题】进制转换
    【POJ】3006
    【POJ】1503
    【POJ】2262
    【POJ】1083
    【POJ】2739
    对拍
    【POJ】2159
    【POJ】3299
  • 原文地址:https://www.cnblogs.com/ggmh/p/9718279.html
Copyright © 2011-2022 走看看