关于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) ...
随机推荐
- SmartOS之以太网精简协议栈TinyIP
做物联网,没有以太网怎么能行!基于Enc28j60,我们团队独立实现了以太网精简协议栈TinyIP,目前支持ARP/ICMP/TCP/UDP/DHCP,还缺一个DNS就完整了.TinyIP内置一个数据 ...
- 解决Vue循环中子组件不实时更新的问题
问题描述 使用Element-UI中的table组件时会遇到一个常见的问题.当在el-table中调用子组件的时候会出现数据更新后,子组件没有重新渲染的问题. eg:资源列表中的健康度组件. 代码如下 ...
- 解决Duilib集成CEF浏览器在Win10无法向客户区拖拽文件
在Duilib中集成CEF浏览器项目实际开发中,遇到一个问题. 一个需求从资源管理器(桌面)拖拽文件到客户端,窗口捕获WM_DROPFILES消息然后进行消息处理,但客户区是集成的CEF浏览器,浏览器 ...
- Eclipse的快捷键使用总结
最近一直在使用Idea开发项目,导致之前一直使用的Eclipse快捷键忘记的差不多了,现在稍微整理了一些,方便以后可以快速切换回来. 常用的Eclipse快捷键总结: Ctrl+S 保存当前正在编辑的 ...
- 质量管理三个概念：QC、QA和QM，你能分得清吗？
今天这里谈的QC.QA和QM,不是岗位或职位,而是一种概念或质量管理的不同时期所关注的重点. 1.产品 早期的质量管理(工业化雏形期)侧重于对终产品的检测.测试,即QC(品质控制)时代. 这个时期的质 ...
- 入门dp总结
写这篇博文主要是为了归纳总结一下dp的有关问题(不定期更新,暑假应该会更的快一些) 会大概讲一下思路,不会事无巨细地讲 另一篇是平时做过的一些dp题,这篇博客里面提到的题都有题解放在那边:https: ...
- java自学入门心得体会 0.1
之前记录了java的简介和基本语法 这里记载下对象和类 不太懂的我理解java对象和类的概念很模糊,因为有了 Abstract修饰符 让对象与类更加的扑朔迷离 - - 所以,就像很开放的语言,创建对象 ...
- Ubuntu 14.04 更新gcc版本至4.9.2
参考: ubuntu 14.04 更新 gcc/g++ 4.9.2 Ubuntu 14.04 更新gcc版本至4.9.2 1.更新源,安装gcc v4.9.2 $ sudo add-apt-repos ...
- UVa 1605 联合国大楼
https://vjudge.net/problem/UVA-1605 题意:有n个国家,要求设计一栋楼并为这n个国家划分房间,要求国家的房间必须连通,且每两个国家之间必须有一间房间是相邻的. 思路: ...
- Cocos2d-x学习笔记（八）精灵对象的创建
精灵类即是Sprite,它实际上就是一张二维图. 它首先直接继承了Node类,因此,它具有节点的特征,同时,它也直接继承了TextureProtocol类,因此,它也具有纹理的基本特征. 这里,有必要 ...