zoukankan      html  css  js  c++  java
  • 关于Grid Layout

    .wrapper {
        display: grid;/*产生一个块级的网格*/
        grid-template-columns: repeat(3, 1fr);/*利用空格分隔的值定义网格的列和行。
                                                grid-template-columns和grid-template-rows属性来定义网格中的行和列。这些属性定义了网格的轨道。
                                                一个网格轨道就是网格中任意两条线之间的空间。
                                                值的大小代表轨道的大小,并且他们之间的空格表示网格线*/
        grid-gap: 10px;
        grid-auto-rows: minmax(100px, auto);/*用minmax()作为grid-auto-rows的值。
                                            自动创建的行高将会是最小100px,最大为auto。
                                            用auto意味着行的尺寸将会根据内容的大小来自动变换。*/
      }
      .one {
        grid-column: 1 / 60;/*设置网格项目列方向的开始位置为1的网格线和结束为60的网格线*/
        grid-row: 1;
        background-color: brown/*颜色为brown*/
      }
      .two {
        grid-column: 2 / 4;/*同上*/
        grid-row: 1 / 3;
        background-color:blue
      }
      .three {
        grid-column: 1;
        grid-row: 2 / 5;
        background-color: brown
      }
      .four {
        grid-column: 3;
        grid-row: 3;
        background-color: brown
      }
      .five {
        grid-column: 2;
        grid-row: 4;
        background-color: brown
      }
      .six {
        grid-column: 3;
        grid-row: 4;
        background-color: brown
      }
      /*colum列*/
  • 相关阅读:
    NFS-网络文件共享服务
    CentOS7.5基础优化与常用配置
    29张截图-全新安装CentOS7.5-超详细!
    VMware跨电脑移动Linux虚拟机
    搭建markdown图床-腾讯云COS
    tcpdump-抓包工具-Linux
    vmware克隆虚拟机
    CentOS6.9安装httpd并正确配置静态IP地址
    区块链核心技术与应用
    docker安装jenkins自动化部署
  • 原文地址:https://www.cnblogs.com/gogogoing/p/9704331.html
Copyright © 2011-2022 走看看