zoukankan      html  css  js  c++  java
  • css3 Grid栅格系统

    Grid 栅格系统的使用

    定义容器

    .coninater {
         display: grid;
    }
    

    多种方式定义单格

    1. 按百分比划分

    .coninater {
         display: grid;
    	 grid-template-rows: 50% 50%;
         grid-template-columns: 20% 20% 20% 20% 20%;
    }
    

    2. 按比例划分

    .coninater {
         display: grid;
    	 grid-template-rows: repeat(3, 1fr);
         grid-template-columns: repeat(3, 1fr);
    }
    

    3. 自动填充

    .coninater {
         display: grid;
    	 grid-template-rows: repeat(auto-fill, 100px);
         grid-template-columns: repeat(auto-fill, 100px);
    }
    

    4. minmax 控制行范围的波动

    .coninater {
         display: grid;
    	 grid-template-rows: repeat(2, minmax(50px, 100px));
         grid-template-columns: repeat(3, 1fr);
    }
    

    栅格间距

    .coninater {
         display: grid;
    	 grid-template-rows: repeat(3, 1fr);
         grid-template-columns: repeat(3, 1fr);
    	 row-gap: 10px;
         column-gap: 10px;
         gap: 10px 10px;
    }
    

    根据栅格线编号放置元素

    .container {
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: 2;
        grid-column-end: 4;
    }
    /* 左左右 */
    .container {
        grid-row-start: 1;
        grid-column-start: 1;
        gird-row-end: 3;
        gird-column-end: 2;
    }
    

    为栅格命名

    .contanier {
        grid-template-rows: repate(3, [r-start] 1fr [r-end]);
    	grid-template-columns: repate(3, [c-start] 1fr [c-end]);
    }
    div:first-child {
        grid-row-start: r-start 1;
        gird-column-start: c-start 1;
        gird-column-end: c-end 3;
        gird-row-end: r-end 1;
    }
    

    偏移元素

    /* 元素居中显示 */
    .container {
        grid-template-rows: repate(3, 1fr);
        grid-template-column: repate(3, 1fr);
    }
    div: first-child {
        grid-row-start: 2;
        grid-column-start: 2;
        grid-column-end: span 1;
        grid-colum-end: span 1;
    }
    

    元素定位简写

    /* 元素居中显示 */
    /* 元素居中显示 */
    .container {
        grid-template-rows: repate(3, 1fr);
        grid-template-column: repate(3, 1fr);
    }
    div: first-child {
        grid-row: 2 / span 1;
        grid-column: 2 / span 1;
    }
    

    使用区域定位

    /* 元素居中显示 */
    .container {
        grid-template-rows: repate(3, 1fr);
        grid-template-column: repate(3, 1fr);
    }
    div: first-child {
        grid-area: 2/2/3/3;
    }
    
  • 相关阅读:
    Ado.net继续学习_人力管理系统开发
    ASP.Net中
    接口实例_模拟简单的播放器解码插件扩展
    JQuery 学习进阶
    android UI进阶之仿iphone的tab效果
    Windows 8 Metro Stype App 学习笔记(五)文件操作
    Windows 8 学习笔记(六)—Accelerormeter和GeoLocation
    mmap如何使用?
    Android自定义组合控件
    Android系列开发博客资源汇总
  • 原文地址:https://www.cnblogs.com/korea/p/11802614.html
Copyright © 2011-2022 走看看