关于CSS Grid Layout的代码解释
.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的代码解释的更多相关文章
- CSS: Grid Layout Module
Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, mak ...
- [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 ...
- CSS Grid Layout In Action
CSS Grid Layout In Action CSS 异形网格布局实战 refs https://static-nginx-online.fbcontent.cn/tutor/tutor-ybc ...
- css grid layout in practice
css grid layout in practice https://caniuse.com/#search=grid subgrid https://caniuse.com/#search=cal ...
- 各个浏览器开启CSS Grid Layout的方式
2017年3月,Chrome.Firefox将开启默认支持. 当然对于很多人等不及浏览器默认支持,想提前体验一把,这里提供一些打开方式: 1.Chrome 在浏览器中输入:chrome://flags ...
- CSS Grid layout布局
CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.你只需要定义一个容器元素并设置display:grid,使用gr ...
- CSS grid layout
CSS网格布局用于将页面分割成数个主要区域,或者用来定义组件内部元素间大小.位置和图层之间的关系. 像表格一样,网格布局让我们能够按行或列来对齐元素. 但是,使用CSS网格可能还是比CSS表格更容 ...
- CSS grid layout demo 网格布局实例
直接 上代码,里面我加注释,相当的简单, 也可以去我的github上直接下载代码,顺手给个星:https://github.com/yurizhang/micro-finance-admin-syst ...
- css之Grid Layout详解
css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...
随机推荐
- 六星教育php vip视频(分享)
最近看的一个swoole的课程,应该也算是vip课程了,不是公开的直播课 比较有特点有一定深度,swoole的实战教程一直也不多,结合swoole构建一个新型框架,最后讲解如何实现分布式RPC的调用. ...
- MySQL索引原理及SQL优化
目录 索引(Index) 索引的原理 b+树 MySQL如何使用索引 如何优化 索引虽好,不可滥用 如何验证索引使用情况? SQL优化 explain查询执行计划 id select_type tab ...
- 增删改查——DBUtils
利用QueryRunner类实现对数据库的增删改查操作,需要先导入jar包:commons-dbutils-1.6.利用QueryRunner类可以实现对数据步骤的简化. 1.添加 运用JDBC工具类 ...
- Spring Boot (四): Druid 连接池密码加密与监控
在上一篇文章<Spring Boot (三): ORM 框架 JPA 与连接池 Hikari> 我们介绍了 JPA 与连接池 Hikari 的整合使用,在国内使用比较多的连接池还有一个是阿 ...
- Python-进程相关概念
名词解释: 进程: 一个具有一定独立功能的程序关于某个数据集合的一次运行活动,是系统进行资源分配和调度运行的基本单位 1. 并行 在某个*时间点*,两件或两件以上的事件(任务)同时执行. 比如说,有三 ...
- 使用VirtualBox虚拟机搭建hadoop运行环境,
最近学了一下大数据,包括hadoop环境的搭建,搭建工具:centos6.5,hadoop2.6.4,eclipse Mars.1 Release (4.5.1),jdk1.8 第一步.网络与ip地址 ...
- 微信小程序 实现多行文字 超出部分省略号显示
在开发小程序: 澳买 的 时候 遇到一个棘手的问题: 当搜索澳洲产品,获取产品列表的时候,有时候产品的名称翻译成中文特别长 我们不能全部在有限的列表里面把产品名都显示出来,这样格式不好控制,显示 出来 ...
- Disruptor—核心概念及体验
本文基于最新的3.4.2的版本文档进行翻译,翻译自: https://github.com/LMAX-Exchange/disruptor/wiki/Introduction https://gith ...
- 向net core 3.0进击——Swagger的改变
目录 前言 引入 测试 小结 前言 十一小长假在不知不觉间可都没了,在这个小尾巴的空隙,把这两天鼓捣的net core 3.0升级过程记录一下,首先还是根据之前的顺序一个个补充进来,先从Swagger ...
- 使用Docker Toolbox基于boot2docker搭建的Docker如何修改镜像源
镜像源 由于众所周知的原因,我们直接连接这些位于国外服务器上的仓库去获取依赖包速度是非常慢的,这时候我们通常会采用国内一些组织或开发者贡献的国内镜像仓库. 1.首先Docker也提供了国内的镜像源:h ...