[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 语言可以用来编写复杂的大型应 ...
随机推荐
- Vue Invalid handler for event "": got undefined
原因:绑定的方法不是放在methods:{}里.比如我把绑定的函数写在了computed:{}里就会报这个错.
- 大数据- Hive
构建在Hadoop之上的数据仓库,数据计算使用MR,数据存储使用HDFS 由于数据计算使用mapreduce.因此通经常使用于进行离线数据处理 Hive 定义了一种类 SQL 查询语言 ...
- Spark 概念学习系列之Spark 多语言编程
不多说,直接上干货! Spark 同时支持Scala.Python.Java 三种应用程序API编程接口和编程方式, 考虑到大数据处理的特性,一般会优先使用Scala进行编程,其次是Python,最后 ...
- ORA-01665 control file is not a standby control file
ORA-01665错误处理 问题描述: 在备库启动至mount状态时,报如下错误: ORA-01665: control file is not a standby control file 解决办法 ...
- JS /CSS 实现模态框（注册和登录组件）
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- import 与export详解
ES6 1.export default 其他模块加载该模块时,import命令可以为该匿名函数指定任意名字. 如: import Vue from 'vue' vue里面的第三方模块都是用了这个 使 ...
- ubuntu下安装phpredis的模块扩展
1.前提是先安装好redis,然后再安装phpredis. .. 2.先下载phpredis-master.tar.gz安装包... 详细详情例如以下: <span style="co ...
- oled的一套stm32实验1
详细的oled介绍:http://blog.sina.com.cn/s/blog_57ad1bd20102wtq8.html 整理自:https://www.cnblogs.com/wp2312139 ...
- python opencv3 —— 改变颜色空间（color space）
OpenCV: Changing Colorspaces 1. 查看 opencv 支持的颜色空间转换 opencv 中色彩空间转换由一些定义的全局的宏给出,使用如下的代码,将它们调出: >&g ...
- 14、编写一个通用的Makefile
编译test_Makefile的方法:a. gcc -o test a.c b.c对于a.c: 预处理.编译(C文件转换成汇编).汇编(汇编转换成机器码)对于b.c:预处理.编译.汇编最后链接优点:命 ...