zoukankan      html  css  js  c++  java
  • 翻译。关于GRID

    关于GRID

    .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;/*同理如.one*/
      grid-row: 1 / 3;
    }
    .three {
      grid-column: 1;    /*同理如.one*/
      grid-row: 2 / 5;
    }
    .four {
      grid-column: 3;    /*同理如.one*/
      grid-row: 3;
    }
    .five {
      grid-column: 2;  /*同理如.one*/
      grid-row: 4;
    }
    .six {
      grid-column: 3;  /*同理如.one*/
      grid-row: 4;
    }

  • 相关阅读:
    电话号码组合 hash表
    合并区间
    最小路径和 动态规划
    计数排序
    插入排序
    选择排序
    归并排序
    C#中不同程序集(dll)存在相同的命名空间
    生成otp token 脚本
    MySQL 组合索引、唯一组合索引的原理
  • 原文地址:https://www.cnblogs.com/LLLL-MM/p/9718239.html
Copyright © 2011-2022 走看看