.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. 如何让C/S应用支持多端(PC、Android、iOS)同时登录?

    在C/S架构中,通常是使用 UserID 作为唯一标志来标记每一个用户的,也就是说,对于一个指定的UserID,只能有一个客户端在线. 如果我们开发的系统要支持同帐号多设备同时登录的场景,即需要像微信 ...

  2. Small Spring系列一:BeanFactory(一)

    人生如逆旅,我亦是行人. 前言 Spring是一个开放源代码的设计层面框架,它解决的是业务逻辑层和其他各层的松耦合问题,因此它将面向接口的编程思想贯穿整个系统应用. 准备 bean-v1.xml配置b ...

  3. tomcat 中无法添加项目等问题的解决方案

    博客地址:http://www.moonxy.com 一.前言 今天新建了一个 maven 项目,添加程序文件之后,发现无法添加项目,然后修改配置,将应用添加到了 tomcat,启动时又报错,解决出现 ...

  4. asp.net配置全局应用程序类 巧妙达到定时生成静态页面

    //在项目里添加一个"全局应用程序类(Global Application Class)",在里面写这样的代码: public class Global : System.Web. ...

  5. 初学Spring的感觉

    1.使用接口 不同的类实现同一接口后都会变成同一类型的类.   spring作业1的思路 lab1: 建立一个有一个输出方法的接口类|并建一个英语类和一个数学类实现该接口.   这两个实现类都重写了那 ...

  6. [Scala]集合中List元素转Tuple元素的函数迭代写法

    ____ 本文链接: https://www.cnblogs.com/senwren/p/Scala-Lis-2-Tuple.html —— Scala没有提供相应写法, 但迭代写法仍然可以做到. 有 ...

  7. 【linux】【jenkins】自动化部署一 安装jenkins及Jenkins工作目录迁移

    系统环境:Centos7 https://jenkins.io/zh/download/ 下载对应系统的jenkins 一.安装jdk8.0 jenkins安装需要jdk8or11,根据jenkins ...

  8. vs加调试代码的正确姿势

    为了方便,我们会在系统中加入一些调试代码,比如自动登录,这样会省掉很多精力时间,但用的姿势不对, 第一重姿势:打包注释 我看一些人在vs中加调试代码(比如自动登录),然后打包的时候注释掉,这样操作是省 ...

  9. SpringBoot起飞系列-使用idea搭建环境(二)

    一.环境配置 安装idea的教程就不说了,相信大家肯定已经安装好了,另外maven环境肯定也安装好了,那么我们就开始使用idea开发工具来创建一个springboot的web项目,这里奉上一个idea ...

  10. JAVA知识点总结(五)(常用类)

    第十八章:常用类 一.main方法解读: public static void main(String[] args) //当点击运行时,JVM会自动调用main方法 //public: 被JVM调用 ...