<div class="wrapper">    <!--定义一个类名为wrapper的div盒子-->
<div class="one">One</div> <!--定义一个类名为one的div盒子-->
<div class="two">Two</div> <!-- 定义一个类名为two的div盒子-->
<div class="three">Three</div><!--定义一个类名为three的div盒子-->
<div class="four">Four</div> <!--定义一个类名为four的div盒子-->
<div class="five">Five</div> <!--定义一个类名为five的div盒子-->
<div class="six">Six</div> <!-- 定义一个类名为six的div盒子-->
</div>
 .wrapper {                    /*带有指定类(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 / 3;/*设置网格项目列方向的开始位置为1的网格线和结束为3的网格线*/
grid-row:; /*设置网格项目行方向的开始(结束)位置为1的网格线*/
}
.two {
grid-column: 2 / 4; /*设置网格项目列方向的开始位置为2的网格线和结束为4的网格线*/
grid-row: 1 / 3; /*设置网格项目行方向的开始位置为1的网格线和结束为3的网格线*/
}
.three {
grid-column:; /*设置网格项目列方向的开始(结束)位置为1的网格线*/
grid-row: 2 / 5; /*设置网格项目行方向的开始位置为2的网格线和结束为5的网格线*/
}
.four {
grid-column:; /*设置网格项目列方向的开始(结束)位置为3的网格线*/
grid-row:; /*设置网格项目行方向的开始(结束)位置为3的网格线*/
}


Gird Layout代码解释的更多相关文章

  1. css之grid layout代码解释

    .wrapper { display: grid; grid-template-columns: repeat(3, 1fr);/*grid-template-columns CSS属性定义了网格列的 ...

  2. Deep Learning入门视频(下)之关于《感受神经网络》两节中的代码解释

    代码1如下: #深度学习入门课程之感受神经网络(上)代码解释: import numpy as np import matplotlib.pyplot as plt #matplotlib是一个库,p ...

  3. [ARM] Cortex-M Startup.s启动文件相关代码解释

    1. 定义一个段名为CSTACK, 这里: NOROOT表示如何定义的段没有被关联,那么同意会被优化掉,如果不想被优化掉就使用ROOT. 后面的括号里数字表示如下: (1):这个段是2的1次方即2字节 ...

  4. word2vec代码解释

    以前看的国外的一篇文章,用代码解释word2vec训练过程,觉得写的不错,转过来了 原文链接 http://nbviewer.jupyter.org/github/dolaameng/tutorial ...

  5. 关于CSS Grid Layout的代码解释

    .wrapper { display: grid; /*生成grid类型块级网格*/ grid-template-columns: repeat(3, 1fr); /*设置显示的列网格线,且重复3次1 ...

  6. javascript代码解释执行过程

    javascript是由浏览器解释执行的脚本语言,不同于java c,需要先编译后运行,javascript 由浏览器js解释器进行解释执行,总的过程分为两大块,预编译期和执行期 下面的几个demo解 ...

  7. 临时2级页表的初始化过程 head_32.S 相关代码解释

    page_pde_offset = (__PAGE_OFFSET >> 20); /* __PAGE_OFFSET是0xc0000000,page_pde_offset = 3072 = ...

  8. 零基础学python之入门和列表数据(附详细的代码解释和执行结果截图)

    Python学习笔记 1 快速入门 下载安装好Python之后,在开始找到 双击打开一个窗口,这是一个shell界面编辑窗口,点击左上角的file——new file新建一个窗口,这里可以输入完整的代 ...

  9. java 的一个hellow word 代码解释

    /* This is a simple Java program. Call this file "Example.java". */(上面是注释的方法) class Exampl ...

随机推荐

  1. google 插件

    鼠标手势    crxMouse Chrome™ Gestures Google翻译 json格式化  JSONView github展开文件夹     Octotree axure 原型  Axur ...

  2. JSP中out.print()、out.println()以及out.write()的区别

    out是JSP九大内置对象之一,是JspWriter的一个对象,JspWriter继承了java.io.Writer类. out.print()和out.write() print()和println ...

  3. python之string模块常量:数字,26个字母,标点符号,空白

    In [8]: import string In [9]: dir(string) In [10]: string.ascii_letters Out[10]: 'abcdefghijklmnopqr ...

  4. nginx 设置自签名证书以及设置网址http强制转https访问

    自签名证书可以在自己的内网环境或者非对外环境使用,保证通信安装 1.生产证书 直接使用脚本生产: 中途会提示书如1次域名和4次密码,把一下文件保存为sh文件,赋予x权限后 直接执行,根据提示输入. # ...

  5. Mac mumu模拟器设置代理

    adb devices adb connect 127.0.0.1:5555 adb shell am start -a android.intent.action.MAIN -n com.andro ...

  6. pycharm-professional-2017.1.1.exe专业版激活方法

    pycharm 2017.1专业版破解码 1.在server选项里边输入 http://elporfirio.com:1017/就可以了. BIG3CLIK6F-eyJsaWNlbnNlSWQiOiJ ...

  7. day5.python列表练习题

    写代码,有如下列表,按照要求实现每一个功能 li = [“alex”, “WuSir”, “ritian”, “barry”, “wenzhou”] 1.计算列表的长度并输出 print(len(li ...

  8. FastJson 数组、List、Set、Map基本序列化与日期格式化

    摘要: FastJson可以直接序列化数组.List.Set.Map等,也可以直接支持日期类型数据的格式化,包括java.util.Date.java.sql.Date.java.sql.Timest ...

  9. Codeforces 342D Xenia and Dominoes 状压dp

    码就完事了. #include<bits/stdc++.h> #define LL long long #define fi first #define se second #define ...

  10. Codeforces 362D Fools and Foolproof Roads

    Fools and Foolproof Roads 并查集瞎搞搞就行, 有点小坑点. #include<bits/stdc++.h> #define LL long long #defin ...