[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 语言可以用来编写复杂的大型应 ...
随机推荐
- 洛谷 P1916 小书童——蚂蚁大战
P1916 小书童——蚂蚁大战 题目背景 小A在你的帮助下,开始“刷题”,他在小书童里发现了一款叫“蚂蚁大战”(又称蛋糕保卫战)的游戏.(你懂得) 题目描述 游戏中会出现n只蚂蚁,分别有a1,a2…… ...
- 20160218.CCPP体系具体解释(0028天)
程序片段(01):加法.c 内容概要:字符串计算表达式 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <st ...
- 找不到或无法载入主类 org.jivesoftware.openfire.starter.ServerStarter
刚接触openfire的配置就出现了这个错误.解决方法非常easy,忘记了将openfire的源文件加入到user entries中了
- HDU 1506 Largest Rectangle in a Histogram(DP)
Largest Rectangle in a Histogram Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 ...
- shell基础之符号与语法
shell脚本如今已经成为了一种非常普遍的脚本语言,之所以如此广泛的被应用,毋庸置疑它是有它的独到之处的.shell脚本语言和其它的语言比方说c/c++有何不同呢?c/c++等语言属于 ...
- amazeui学习笔记--css（HTML元素3）--表单Form
amazeui学习笔记--css(HTML元素3)--表单Form 一.总结 1.form样式使用:在容器上添加 .am-form class,容器里的子元素才会应用 Amaze UI 定义的样式. ...
- 使用 LaTeX 绘制 PGM（Probabilistic Graphical Models）中的贝叶斯网络（bayesian networks）
Software for drawing bayesian networks (graphical models) 这里需要调用 latex 中的绘图库:TikZ and PGF. 注意,下述 tex ...
- ZOJ 2723 Semi-Prime ||ZOJ 2060 Fibonacci Again 水水水！
两题水题: 1.如果一个数能被分解为两个素数的乘积,则称为Semi-Prime,给你一个数,让你判断是不是Semi-Prime数. 2.定义F(0) = 7, F(1) = 11, F(n) = F( ...
- RMAN冷备份、一致性备份脚本
RMAN冷备份.一致性备份脚本 run{ shutdown immediate; startup mount; allocate channel c1 type disk; allocate chan ...
- Python 极简教程（二）编码工具
Python 的编码工具很多.目前最流行的是 pycharm,关于 pycharm 的安装使用请参考 PyCharm安装使用教程. 而学习过程中,我觉得最好用的,还是 Python 自带的练习工具 I ...