关于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) ...
随机推荐
- ubuntu下交叉编译mono
环境:ubuntu16.04 wget download.mono-project.com/sources/mono/mono-4.8.1.0.tar.bz2 配置: CC=arm-linux-you ...
- ubuntu14.04禁止触摸板和恢复触摸板
1.使用xinput list查看与触摸板相关的id,以下是本机的输出,没搞清楚为什么是Mouse!!! jello@jello:~$ xinput list⎡ Virtual core pointe ...
- ActiveMQ 集群配置 高可用
自从activemq5.9.0开始,activemq的集群实现方式取消了传统的Pure Master Slave方式,增加了基于zookeeper+leveldb的实现方式,其他两种方式:目录共享和数 ...
- VS中sln和suo的区别
1.调试程序出现这个错误an error occurred while validating 解决方案:http://stackoverflow.com/questions/8648428/an-er ...
- java web项目去除项目名称访问设置方法及tomcat的<Host>标签讲解
本文为博主原创,未经允许不得转载. 在集群项目中,为了方便用户可以更快捷的访问,即只需要输入IP和端口号,就可以直接访问项目,因为 模块比较多,记住项目名称并不容易,所以在网上查看和学习了下设置的方法 ...
- 【Coursera】Fourth Week(1)
1994: year of the web (1)网景(Netscape)成立. (2)www conference 在CERN 举办. (3)www conference 在芝加哥举办. (4)十月 ...
- POJ 2976 Dropping tests（分数规划）
http://poj.org/problem?id=2976 题意: 给出ai和bi,ai和bi是一一配对的,现在可以删除k对,使得的值最大. 思路: 分数规划题,可以参考<挑战程序竞赛> ...
- Codeforces D - The Child and Zoo
D - The Child and Zoo 思路: 并查集+贪心 每条边的权值可以用min(a[u],a[v])来表示,然后按边的权值从大到小排序 然后用并查集从大的边开始合并,因为你要合并的这两个联 ...
- robot脚本编写规范
一个robot脚本主要有四部分组成: ***settings*** 设置 ***keywords*** 关键词 ***variables*** 变量 ***test cases*** 测试用例 一般, ...
- Java JDK5新特性-可变参数
2017-10-31 00:19:07 可变参数:定义方法的时候不知道该定义多少个参数 格式:修饰符 返回值类型 方法名(数据类型... 变量名){} 注意:这里的变量其实是一个数组 ...