CSS grid layout
CSS网格布局用于将页面分割成数个主要区域，或者用来定义组件内部元素间大小、位置和图层之间的关系。
像表格一样，网格布局让我们能够按行或列来对齐元素。 但是，使用CSS网格可能还是比CSS表格更容易布局。 例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。
示例：
<doctype html>
<html>
<head>
<title>title</title>
<style>
.wrapper { display: grid;/*网格布局*/ grid-template-columns: repeat(3, 1fr); /*把网格区域分成三等分为三列 "repeat(3,1fr)"等价于 "1fr 1fr 1fr */
grid-gap: 10px; /*网格间隙的宽度(网格线宽度？)*/
grid-auto-rows: minmax(100px, auto); /*指定网格行的行高最小值为100px*/
}
.one {
grid-column: 1 / 3; /*列的范围从第一条网格线开始到第三条网格线结束，下同*/
grid-row: 1; /*行的范围指定为第一行单行，下同*/
border-style:solid; /*加边框为了便于观察，下同*/
border-color:#f00;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
border-style:solid;
border-color:#0f0;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
border-style:solid;
border-color:#00f;
}
.four {
grid-column: 3;
grid-row: 3;
border-style:solid;
border-color:#ff0;
}
.five {
grid-column: 2;
grid-row: 4;
border-style:solid;
border-color:#0ff;
}
.six {
grid-column: 3;
grid-row: 4;
border-style:solid;
border-color:#f0f;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
</body>
</html>
result：
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 demo 网格布局实例
直接 上代码,里面我加注释,相当的简单, 也可以去我的github上直接下载代码,顺手给个星:https://github.com/yurizhang/micro-finance-admin-syst ...
- 关于CSS Grid Layout的代码解释
.wrapper { display: grid; /*生成grid类型块级网格*/ grid-template-columns: repeat(3, 1fr); /*设置显示的列网格线,且重复3次1 ...
- css之Grid Layout详解
css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...
随机推荐
- SpringBoot -- 计划任务
从Spring 3.1 开始,计划任务在Spring中的实现变得异常的简单.首先通过在配置类注解@EnableScheduling 来开启对计划任务的支持,然后再执行集合任务的方法上注解@Schedu ...
- linux系统编程：自己动手写一个pwd命令
pwd命令:打印当前的工作目录 我们都知道每个目录下面都有两个特殊的目录( . 和 .. ), .: 当前目录, ..: 上层目录, 每个目录都有一个i节点与之相关联 ghostwu@ubuntu: ...
- Python3.6下的Requests登录及利用Cookies登录
利用Python中的Requests模块可以实现Post,Get等发送功能,我以登录某网站为例,记录使用Post发送用户名.密码及图形验证码,以及通过Cookies直接登录的内容. 1.利用POST发 ...
- java中System.currentTimeMillis()
System.curentTimeMillis();会产生一个当前的毫秒. 1.计算某个方法的耗时 long curTime = System.currentTimeMillis(); resourc ...
- Nginx 优化配置及详细注释
Nginx 的nginx.conf文件,是调优后的,具体影响已经写清楚注释,可以拿来用,有一些设置无效,我备注上了,不知道是不是版本的问题,回头查一下再更正. #普通配置 #==性能配置 #运行用户 ...
- MariaDB Centos7 下安装MariaDB
Centos7 下安装MariaDB by:授客 QQ:1033553122 1.下载安装文件 rpm包为例,对于标准服务器安装,至少需要下载client,shared,serve文件(安装时如果少了 ...
- 《Inside C#》笔记(一) .NET平台
C# 基于.NET运行时,所以有必要首先对.NET以及C#与.NET平台的关系有一定的了解. 一 .NET平台 .NET背后的基本思想是将原本独立工作的设备.网络服务整合在一个统一的平台上,从而可以为 ...
- webpack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- 重学C语言---03数据和C
1.数据的必要性.数据使我们生活中不可缺少的东西,程序也是如次,离不开数据.将文字.图片和单词等输入到算计,将其展现出来或者做一系列操作等. 2.实例程序. /*rhodium.c--用金属铑衡量体重 ...
- .NET泛型中的协变与逆变
泛型的可变性:协变性和逆变性 实质上,可变性是以一种类型安全的方式,将一个对象作为另一个对象来使用. 我们已经习惯了普通继承中的可变性:例如,若某方法声明返回类型为Stream,在实现时可以返回一个M ...