[CSS] Re-order the appearance of grid items using the order property
As with flex items, we can set an order value on grid items. Let’s see how this affects the DOM and the appearance of our grid.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Order</title>
<style>
.container > * {
background-color: aqua;
} .container {
display: grid;
height: 100vh;
grid-gap: 10px;
} .grid-item:nth-of-type(3) {
color: antiquewhite;
font-size: 2em;
order: -1; /*default is 0*/
} .grid-item:nth-of-type(1) {
color: antiquewhite;
font-size: 2em;
order:; /*default is 0*/
}
</style>
</head>
<body>
<div class="container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
</div>
</body>
</html>
[CSS] Re-order the appearance of grid items using the order property的更多相关文章
- [CSS] Change the auto-placement behaviour of grid items with grid-auto-flow
We can change the automatic behaviour of what order our grid items appear. We can even re-order the ...
- [Grid Layout] Place grid items on a grid using grid-column and grid-row
It’s possible to position a grid item anywhere on a grid track. To do this, let’s specify some grid- ...
- CSS字体渐变 & 隐藏浏览器滚动条 & grid布局（转载）
字体渐变 https://www.zhangxinxu.com/study/201104/css3-text-gradient-2.html 隐藏浏览器滚动条 https://blog.csdn. ...
- In Oracle 11g, how to change the order of the results of a sql without “order by”?（转）
oracle 11g 当sql语句中不加order by的时候,好像是按rowid的顺序返回结果的.我也看过一些相关的文档,oracle的官方意思就是不加order by,就不保证输出的顺序. 那么, ...
- Back to Back Order Process
Steps involved involved in back to back order process in oracle apps 1. Enter Sales Order 2. Book Sa ...
- Ext 可编辑的GridPanel
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- UVA 1085 House of Cards（对抗搜索）
Description Axel and Birgit like to play a card game in which they build a house of cards, gaining ...
- Linq技巧3——何时及怎么使用预先加载
通常情况在你的应用程序中,一旦你要查询完数据的的时候,你知道使用实体来做什么. 假如你打印一份订单给顾客,你知道不包括组成订单的Items和Products信息,打印的信息是不完整的,所以查询时也需要 ...
- 9个常用ES6特性归纳(一般用这些就够了)
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应 ...
随机推荐
- Win8.1恢复这台电脑里的6个文件夹
平台:win8.1 问题:网络下载的ghost版8.1,装好后“这台电脑”里没有6个常用的文件夹. 解决:导入下列注册表项即可 Windows Registry Editor Version 5.00 ...
- BZOJ3510首都（LCT）
Description 在X星球上有N个国家,每个国家占据着X星球的一座城市.由于国家之间是敌对关系,所以不同国家的两个城市是不会有公路相连的. X星球上战乱频发,如果A国打败了B国,那么B国将永远从 ...
- 全球可信并且唯一免费的HTTPS(SSL)证书颁发机构：StartSSL
全球可信并且唯一免费的HTTPS(SSL)证书颁发机构:StartSSL http://blog.s135.com/startssl/ 购买权威机构的证书一年大概得七八千元,其实这是不值得的,所以一直 ...
- seaJS注意点：
1.require 是同步往下执行,require.async 则是异步回调执行.require.async 一般用来加载可延迟异步加载的模块.
- javascript保存变量到本地文件
最近用echarts在做可视化,好多实例都有一大堆数据,想着把数据保存到本地,有什么比较方便又可靠的办法呢? 将下边代码粘贴到浏览器的控制台 (function(console){ console.s ...
- 手动删除RMAN备份的方法
查询 RMAN> list backup; using target database control file instead of recovery catalog List of Back ...
- POJ 3278 Catch That Cow（BFS 剪枝）
题目链接:http://poj.org/problem?id=3278 这几次都是每天的第一道题都挺顺利,然后第二道题一卡一天. = =,今天的这道题7点40就出来了,不知道第二道题在下午7点能不能出 ...
- C语言创建删不掉的目录
上一篇博客写了一个杀不死的进程,如今再写一个删不掉的目录(文件同理),所谓删不掉不是真的删不掉而是删掉后立即又一次创建. 代码例如以下: #include <stdio.h> #inclu ...
- Windows下安装Resin及配置具体解释与公布应用
关于Resin的优点,网上介绍了一大堆.小编经不住诱惑,决定试用一下. 眼下Resin的最新版本号为:4.0.40.能够从官网直接下载. 1. 将下载下来的Resin包解压开,会看到一 ...
- HDU 1556 Color the ball【算法的优化】
/* 解题思路:每次仅仅求解一開始的第一个数字,让第一个数字加一,最后的一个数字的后面一个数减一.我们能够想想,最后加的时候,就是加上前面一个数出现的次数和自己本身出现的次数. 解题人:lingnic ...