zoukankan      html  css  js  c++  java
  • 关于CSS/Grid Layout实例的理解

    代码实例来自网络

    .wrapper {
      display: grid;//创建一个网格容器,所有容器子结点自动成为容器项目
      grid-template-columns: repeat(3, 1fr);//创建重复的网格轨道,第一个参数定义网格轨道重复的次数为3,每个列宽为1fr
      grid-gap: 10px;//属性grid-gap是grid-row-gap和grid-column-gap的简写形式。行间隙和列间隙都是10px
      grid-auto-rows: minmax(100px, auto);//定义了隐式网格的行轨道的大小,最小值为100px,最大值为自动。
    }
    .one {
      grid-column: 1 / 3;//grid-column是grid-column-start和grid-column-end的简写,这里指定了grid-column-start为1/3
      grid-row: 1;//同上,指定grid-row-start为1
    }
    .two { 
      grid-column: 2 / 4;//指定grid-column-start为2/4
      grid-row: 1 / 3;//指定grid-row-start为1 / 3
    }
    .three {
      grid-column: 1;//指定grid-column-start为1
      grid-row: 2 / 5;//指定grid-row-start为2 / 5
    }
    .four {
      grid-column: 3;//指定grid-column-start为3
      grid-row: 3;//指定grid-row-start为3
    }
    .five {
      grid-column: 2;//指定grid-column-start为2
      grid-row: 4;//指定grid-row-start为4
    }
    .six {
      grid-column: 3;//指定grid-column-start为3
      grid-row: 4;//指定grid-row-start为4
    }
    
  • 相关阅读:
    autoresizing代码实现
    控制器的view的加载优先级
    iOS控制器的创建方式
    关于深复制和浅复制
    关于textField
    h5页面列表滚动加载数据
    数据库中存储过程和函数的区别
    Docker搭建Portainer可视化界面
    Docker部署springboot,从简单Eureka开始
    docker安装rabbitmq
  • 原文地址:https://www.cnblogs.com/Jaehwan/p/9697194.html
Copyright © 2011-2022 走看看