zoukankan      html  css  js  c++  java
  • grid-layout

    <!-- 创建三个网格布局-->
    .wrapper {
        <!--创建一个网格布局 -->
      display: grid;
      <!--创建3列 且每列都等距    -->
      grid-template-columns: repeat(3, 1fr);
      <!--网格行列之间的距离是10px-->
      grid-gap: 10px;
      <!--网格项位于未明确指定大小的行中 则会创建grid-auto-rows来保存它,最小的宽度是100px -->
      grid-auto-rows: minmax(100px, auto);
    }
    <!-- -->
    .one {
        <!--此网格列是1到3-->
      grid-column: 1 / 3;
      <!--此网格的行网格线是1-->
      grid-row: 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;
    }

    此代码为自己理解的css的grid-layout 有问题欢迎提出·

  • 相关阅读:
    BZOJ 1064 NOI2008 假面舞会
    p1186反素数(模板题)
    p1140【飞船控制站】
    p1164【立方体求和】
    p1103【base64编码】
    长沙集训(day不知道)伪总结(怕不是是一篇心得??)
    长沙集训day12
    长沙集训day10
    长沙集训day9
    长沙集训day8
  • 原文地址:https://www.cnblogs.com/misubishi/p/9694931.html
Copyright © 2011-2022 走看看