zoukankan      html  css  js  c++  java
  • 关于CSS Grid Layout的代码解释

    .wrapper {
      display: grid;  /*生成grid类型块级网格*/
      grid-template-columns: repeat(3, 1fr); /*设置显示的列网格线,且重复3次1fr,成三列网格,fr可以自动根据网格容器的宽度来计算列的宽度*/
      grid-gap: 10px; /*单元格之间有10px的间距*/
      grid-auto-rows: minmax(100px, auto); /*设置隐式的行网格线,单元格宽度保持在最小100px,最大auto(即max-content最理想大小的值)之间*/
    }
    .one {
      grid-column: 1 / 3;/*规定网格中每列的宽度,第一个数字为列的起始网格线的位置,第二个是线束网格线的位置*/
      grid-row: 1; /*规定网格中每行的高度若为数字则表示x个单位*/
    }
    .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;
    }
  • 相关阅读:
    VUE 入门基础(8)
    VUE 入门基础(7)
    VUE 入门基础(6)
    VUE 入门基础(5)
    VUE 入门基础(4)
    VUE 入门基础(3)
    线程的通信
    如何实现一个简单的RPC
    Java程序员必须掌握的线程知识-Callable和Future
    同步函数死锁现象
  • 原文地址:https://www.cnblogs.com/5H5H/p/9712508.html
Copyright © 2011-2022 走看看