关于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) ...
随机推荐
- 51nod 1428 活动安排问题 (贪心+优先队列)
来源:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1428 首先按照开始时间从小到大排序. 其实只要维护一个结束时间的最 ...
- Linux 安装 mysql 转 http://www.cnblogs.com/fnlingnzb-learner/p/5830622.html
到mysql官网下载mysql编译好的二进制安装包,在下载页面Select Platform:选项选择linux-generic,然后把页面拉到底部,64位系统下载Linux - Generic (g ...
- Asp.net自定义单选复选框控件
将常用的jquery插件封装成控件也是个不错的选择 下面是效果的简单颜色,由于博客系统的限制没法完整演示最终效果,请下载示例查看 Asp.netWeb APIC#Javascript 1.新建类库 ...
- Ubuntu 登陆界面无限循环问题 以及 root用户无法使用命令问题
在Ubuntu下配置好了eclipse之后,马上着手用eclipse试运行ns3.在./waf编译的时候出现了"Permission denied"问题. 在网络上查阅了相关资料之 ...
- 第四次程序设计作业 C++计算器计算及命令行的使用 前缀表达式方法实现
关键词:前缀中缀后缀表达式 波兰式 命令行 myGithub 一.前言 很有意思的开发和学习经历,从刚刚开始看到作业思考半天到现在的Debug过程,对我来说都或多或少有所提升. 也许这个时候自己挺迷茫 ...
- 机器学习-数据可视化神器matplotlib学习之路（四）
今天画一下3D图像,首先的另外引用一个包 from mpl_toolkits.mplot3d import Axes3D,接下来画一个球体,首先来看看球体的参数方程吧 (0≤θ≤2π,0≤φ≤π) 然 ...
- Qt5_qt.conf
本站所有文章由本站和原作者保留一切权力,仅在保留本版权信息.原文链接.原 文作者的情况下允许转载,转载请勿删改原文内容, 并不得用于商业用途. 谢谢合作. 原文链接:用qt.conf和qtconfig ...
- 使用NativeExtension向AIR app 添加Activity和BroadCastReceiver（2）
开发: Android项目 新建一个针对NativeExtension的Android项目,实现相应的FREContext,FREExtension和FREFunction等方法,同时新建一个Acti ...
- 2017"百度之星"程序设计大赛 - 资格赛-度度熊与邪恶大魔王（dp+后缀最小值）
度度熊与邪恶大魔王 思路:由于防御和血量的范围很小,所以暴力枚举出对于每种防御造成的每种伤害所需的最小花费,最后只需在伤害大于等于血量的情况下再找到最小花费(这个只需要后缀最小值预处理一下就可以了) ...
- Java类和对象的概念
Java是一门面向对象的编程语言,理解Java,首先要理解类与对象这两个概念. Java中的类可以看做C语言中结构体的升级版.结构体是一种构造数据类型,可以包含不同的成员(变量),每个成员的数据类型可 ...