.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列*/

关于Grid Layout的更多相关文章

  1. CSS3 GRID LAYOUT

    CSS3 GRID LAYOUT http://www.w3cplus.com/blog/tags/356.html 中国首个开源 HTML5 跨屏前端框架 http://amazeui.org/

  2. iphone Dev 开发实例9:Create Grid Layout Using UICollectionView in iOS 6

    In this tutorial, we will build a simple app to display a collection of recipe photos in grid layout ...

  3. Unity3D 使用 UI 的 Grid Layout Group 组件。

    1.首先创建一个容器,用于存放列表项的内容. 这里使用 Panel 来做为容器. 这里要注意! “Grid Layout Group”是要增加在容器的游戏对象里. 同时,只有容器对象的子对象才有排列效 ...

  4. WPF笔记(2.4 Grid)——Layout

    原文:WPF笔记(2.4 Grid)--Layout 第一章已经简单介绍过这个容器,这一节详细介绍.Grid一般是用表格(Grid.Row 和Grid.Column )的,比StackPanel更细致 ...

  5. flexbox与grid layout的区别

    flexbox是一种针对一维的局部布局,以轴为核心的弹性布局. grid layout是二维的更加全面的网格布局,

  6. CSS: Grid Layout Module

    Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, mak ...

  7. [Grid Layout] Use the repeat function to efficiently write grid-template values

    We can use the repeat() function if we have repeating specifications for columns and rows. With the  ...

  8. [Grid Layout] Describe a grid layout using named grid lines

    We can use named grid lines to describe our grid layout. Let’s see how to apply this to our grid-tem ...

  9. [Grid Layout] Specify a grid gutter size with grid-gap

    It’s beautifully straightforward to add a gutter to our grid layout. Let’s apply one with grid-gap.

  10. [CSS] Get up and running with CSS Grid Layout

    We’ll discuss the display values pertinent to CSS Grid Layout – grid, inline-grid, and subgrid. Then ...

随机推荐

  1. 实验五 <FBG>团队亮相

    一.队名:FBG 二.队员: 201571030321:马玉婷 (小队长) 201571030317:马美玲 201571030331:益西卓嘎 三.队员风采: 201571030321:马玉婷 风格 ...

  2. Js拾忆

    instanceof运算符:他是判断一个构造函数的prototype是否在对象的原型链上查找到 var a = new Array(); console.log(a instanceof Array) ...

  3. MySQL 存储过程的变量

    MySQL  存储过程的变量 变量是一个命名数据对象,变量的值可以在存储过程执行期间更改.我们通常使用存储过程中的变量来保存直接/间接结果. 这些变量是存储过程的本地变量. 注意:变量必须先声明后,才 ...

  4. PyQt5——高级控件

    PyQt5高级控件使用方法详见:https://blog.csdn.net/jia666666/article/list/4?t=1& PyQt5高级控件汇总: 1.QTableView 2. ...

  5. NGS概念大科普(转)

    NGS又称为下一代测序技术,高通量测序技术 以高输出量和高解析度为主要特色,能一次并行对几十万到几百万条DNA分子进行序列读取,在提供丰富的遗传学信息的同时,还可大大降低测序费用.缩短测序时间的测序技 ...

  6. Day 4 变量常量

    编辑语言的分类 编程语言,他是人与计算机沟通的一种介质 机器语言 计算机只认识0和1,为了和计算机沟通,你也得认识0和1 优点:执行效率快 缺点:普通人根本就写不了这种代码,开发效率低 汇编语言 他还 ...

  7. Python 入门小实例笔记

    实例1:打印用户输入的姓名与手机号码知识点:编码,获取输入,变量,标准输出 #encoding=utf-8 import time #1.提示用户输入信息 name = input ("请输 ...

  8. 可编程并行接口8255A详解

  9. elasticSearch安装 Kibana安装 Sense安装

    安装最新版本,安装6.*版本 先提示一个重要的事情,kibana新版本不需要安装Sense, 官方的是老版的Kibana才需要,我们现在用devTool http://localhost:5601/a ...

  10. Python 计算π及进度条显示

    一,首先打开命令提示符找到Python路径,输入pip install tqdm下载第三方库tpdm. 二,写程序 法一 from math import * from tqdm import tqd ...