.wrapper {
display: grid; /*生成grid类型块级网格*/
grid-template-columns: repeat(3, 1fr); /*设置显示的列网格线,且重复3次1fr,成三列网格,fr可以自动根据网格容器的宽度来计算列的宽度*/
grid-gap: 10px; /*单元格之间有10px的间距*/
grid-auto-rows: minmax(100px, auto); /*设置隐式的行网格线,单元格宽度保持在最小100px,最大auto(即max-content最理想大小的值)之间*/
}
.one {
grid-column: 1 / 3;/*规定网格中每列的宽度,第一个数字为列的起始网格线的位置,第二个是线束网格线的位置*/
grid-row:; /*规定网格中每行的高度若为数字则表示x个单位*/
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.three {
grid-column:;
grid-row: 2 / 5;
}
.four {
grid-column:;
grid-row:;
}
.five {
grid-column:;
grid-row:;
}
.six {
grid-column:;
grid-row:;
}

关于CSS Grid Layout的代码解释的更多相关文章

  1. CSS: Grid Layout Module

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

  2. [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 ...

  3. CSS Grid Layout In Action

    CSS Grid Layout In Action CSS 异形网格布局实战 refs https://static-nginx-online.fbcontent.cn/tutor/tutor-ybc ...

  4. css grid layout in practice

    css grid layout in practice https://caniuse.com/#search=grid subgrid https://caniuse.com/#search=cal ...

  5. 各个浏览器开启CSS Grid Layout的方式

    2017年3月,Chrome.Firefox将开启默认支持. 当然对于很多人等不及浏览器默认支持,想提前体验一把,这里提供一些打开方式: 1.Chrome 在浏览器中输入:chrome://flags ...

  6. CSS Grid layout布局

    CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.你只需要定义一个容器元素并设置display:grid,使用gr ...

  7. CSS grid layout

      CSS网格布局用于将页面分割成数个主要区域,或者用来定义组件内部元素间大小.位置和图层之间的关系. 像表格一样,网格布局让我们能够按行或列来对齐元素. 但是,使用CSS网格可能还是比CSS表格更容 ...

  8. CSS grid layout demo 网格布局实例

    直接 上代码,里面我加注释,相当的简单, 也可以去我的github上直接下载代码,顺手给个星:https://github.com/yurizhang/micro-finance-admin-syst ...

  9. css之Grid Layout详解

    css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...

随机推荐

  1. FreeSql (十四)批量更新数据

    FreeSql支持丰富的更新数据方法,支持单条或批量更新,在特定的数据库执行还可以返回更新后的记录值. var connstr = "Data Source=127.0.0.1;Port=3 ...

  2. android 之图片异步加载

    一.概述 本文来自"慕课网" 的学习,只是对代码做一下分析 图片异步加载有2种方式:  (多线程/线程池) 或者 用其实AsyncTask , 其实AsyncTask底层也是用的多 ...

  3. GC垃圾收集算法

    JVM中的垃圾收集算法实现涉及大量的程序细节,而且各个平台的虚拟机操作内存的方法又各不相同,这里介绍几种垃圾收集算法的思想. 1.标记-清除算法 这是最基础的垃圾收集算法,分为“标记”和“清除”两个阶 ...

  4. Unity3D_01_各种寻找GameObject方法

    1.GameObject.Find(): 寻找Hierarchy面板中的activie 不为false的游戏对象: 路径如官方事例写法: public class ExampleClass : Mon ...

  5. Java使用Optional与Stream来取代if判空逻辑(JDK8以上)

    Java使用Optional与Stream来取代if判空逻辑(JDK8以上) 通过本文你可以用非常简短的代码替代业务逻辑中的判null校验,并且很容易的在出现空指针的时候进行打日志或其他操作. 注:如 ...

  6. 上传本地Jar包到阿里云的云效私有仓库

    一.前言 前2天玩了一下上传本地jar到maven中央仓库,随后我们老大又给我说了一个叫云效的私有仓库也可以玩,小编试了一下,果然很舒服,配置很简单,效率很高,几分钟就能搞定,只需要自己有个阿里云的账 ...

  7. 【POJ - 3723 】Conscription(最小生成树)

    Conscription Descriptions 需要征募女兵N人,男兵M人. 每招募一个人需要花费10000美元. 如果已经招募的人中有一些关系亲密的人,那么可以少花一些钱. 给出若干男女之前的1 ...

  8. 关于WinForm TreeView的分享~

    最近在写个测试demo的时候使用到WinForm TreeView,已经好久没接触了,有些生疏,所以还是记录一下遇到的一些问题. 1.如果动态绑定TreeView,这个功能一般会在数据量不确定,需要去 ...

  9. 关于大脑与CPU的简单思考

    今天午休突发奇想的思考了大脑与cpu的差异,发现出了大脑是生物信号驱动的单核cpu而已(并行任务是时间片的调度,要额外的堆栈记忆或者物理如纸张的存储). 大脑永远是线性的逐行执行指令,执行期间无法判断 ...

  10. 一行命令安装docker和docker-compose(CentOS7)

    想快速装好docker和docker-compose ?那就随本文用一次复制粘贴来完成安装: 环境信息 操作系统:CentOS Linux release 7.7.1908 (Core, 操作账号:r ...