关于display：grid layout
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one {
background-color: blueviolet;
grid-column: 1 / 3;
grid-row: 1;
}
.two {
background-color: blue;
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.three {
background-color: rgb(226, 147, 43);
grid-column: 1;
grid-row: 2 / 5;
}
.four {
background-color: rgb(148, 125, 168);
grid-column: 3;
grid-row: 3;
}
.five {
background-color: rgb(68, 45, 88);
grid-column: 2;
grid-row: 4;
}
.six {
background-color: rgb(86, 226, 43);
grid-column: 3;
grid-row: 4;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="例子.css">
</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>
关于display：grid layout的更多相关文章
- iphone Dev 开发实例9:Create Grid Layout Using UICollectionView in iOS 6
In this tutorial, we will build a simple app to display a collection of recipe photos in grid layout ...
- CSS: Grid Layout Module
Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, mak ...
- [Grid Layout] Use the repeat function to efficiently write grid-template values
We can use the repeat() function if we have repeating specifications for columns and rows. With the ...
- [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中的 position与Grid Layout
[1]CSS之Position(定位布局): 现css常用的属性有5种: 1.static 2.absolute 3.fixed 4.relative 5.sticky. 1.static 表示元素的 ...
- css之Grid Layout详解
css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...
- CSS3 Grid Layout & <track-size> & <line-name>
CSS3 Grid Layout & <track-size> & <line-name> grid container grid-template: < ...
- css grid layout in practice
css grid layout in practice https://caniuse.com/#search=grid subgrid https://caniuse.com/#search=cal ...
- css-next & grid layout
css-next & grid layout css3 demo https://alligator.io/ @media only screen and (max-width: 30em) ...
随机推荐
- bzoj 3600 没有人的算术 - 替罪羊树 - 线段树
题目都是图片,就不给了,就给链接好了 由于bzoj比较慢,就先给[vjudge传送门] 有兴趣的可以去逛bzoj[bzoj传送门] 题目大意 有n个数a[1],a[2],...,a[n],它们开始都是 ...
- map按value值查找——find_if的使用(转载)
转载:http://www.cnblogs.com/xufeiyang/archive/2012/05/09/2491871.html CValueFind #ifndef _CVALUEFIND_H ...
- 【文件readonly异常】异常退出编译文件，再次进入提示readonly
1.对于同一个文件如果上次已经打开,而未关闭的情况下,又打开该文件进行编辑时,会出现如下提醒: 这是由于已经打开但未闭关的文件,会在其目录下出现一个.swp的文件,由于是属于隐藏文件,可以用命令l. ...
- session的理解和使用
Session的使用与Session的生命周期 1.HttpSession的方法 Object getAttribute(String); Enumeration<String> getA ...
- 【TCP/IP详解 卷一：协议】第十九章 TCP的交互数据流
19.1 引言 前一章我们介绍了TCP连接的建立与释放:三握四挥,以及状态转移图. TCP报文段分为:交互数据,以及成块数据(下一章介绍). 交互数据:例如telnet,ssh,这种类型的协议在大多数 ...
- python 编程基础练习 第一天
python 编程基础练习 第一天: 需求: 1.计算2的38次方,180*0.7输出(精度显示正常), x的y次方,数字倒序输出即345876输出678543,方法越多越好. 2.字符串处理: 1) ...
- MVC ---- IEnumerable<T>、List<T> 前台遍历展示
突然做前台数据展示,发现IEnumerable 对一个列表的展示还是可以,但要是多个类型放在一个表中如何处理呢,如下: 一个类IEnumerable遍历 后台 public IEnumerable&l ...
- hdu 5525 Product 数论算贡献
Product Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Proble ...
- 阿里官方Java代码规范标准
阿里官方Java代码规范标准<阿里巴巴Java开发手册 终极版 v1.3.0>下载 https://www.cnblogs.com/han-1034683568/p/7680354.htm ...
- XML和Schema
2017-11-03 19:33:56 XML:Extensible Markup Language,也就是可扩展标记语言.XML工具使处理和转化信息变得十分容易和方便. XML和HTML格式是古老的 ...