关于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) ...
随机推荐
- payload
payload就是协议报文中的有效载荷所占报文的百分比,用报文中去除协议的长度/报文总长度,协议设计的时候需要考虑到有效载荷所占的比重,避免出现payload很小的情况,比如TCP在设计的时候,就考虑 ...
- Tensorflow游乐场
昨天,Google发布了Tensorflow游乐场.Tensorflow是Google今年推出的机器学习开源平台.而有了Tensorflow游乐场,我们在浏览器中就可以训练自己的神经网络,还有酷酷的图 ...
- UVa 10635 Prince and Princess - 动态规划
讲一下题目大意,就是有两个长度为p + 1和q + 1的序列,求它们的LCS. 如果用O(pq)的算法对于这道题来说还是太慢了.所以要另外想一些方法.注意到序列中的所有元素都不相同,所以两个序列中数对 ...
- Java查找算法之二分查找
二分查找是一种查询效率非常高的查找算法.又称折半查找. 一.算法思想 有序的序列,每次都是以序列的中间位置的数来与待查找的关键字进行比较,每次缩小一半的查找范围,直到匹配成功. 一个情景:将表中间位置 ...
- Python3基础 list 元组转成列表
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- Python3基础 str format 输出花括号{}
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- Pairs Forming LCM （LCM+ 唯一分解定理）题解
Pairs Forming LCM Find the result of the following code: ; i <= n; i++ ) for( int j = i; j ...
- github上不去了
这几天发现github.com上不去了 可能是由于要杜绝国外的人使用最新的技术??从而屏蔽了吗?
- .Net Core集成Office Web Apps（一）
最近开始学习.Net Core,并使用Visual Studio Code工具来开发.感觉开发起来特别的方便,但是有个头疼的地方:许多的类库被修改了,一时半会儿还熟悉不了,需要查阅官方API... M ...
- go 变量声明
第一种,指定变量类型,声明后若不赋值,使用默认值. var v_name v_type v_name = value 第二种,根据值自行判定变量类型. var v_name = value 第三种,省 ...