[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 语言可以用来编写复杂的大型应 ...
随机推荐
- Linux登录状态
1.hostname 显示主机名称.设置主机名称 1)显示主机名称 xiaohuang@xiaohuang-virtual-machine:~$ hostname xiaohuang-virtual- ...
- 11. Linux——LCD驱动程序
由上一节 得出写个LCD驱动入口函数,需要以下4步: 1) 分配一个fb_info结构体: framebuffer_alloc(); 2) 设置fb_info 3) 设置硬件相关的操作 4) 使能LC ...
- 【习题 7-3 UVA - 211】The Domino Effect
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 每次搜素要往下还是要往右摆. 然后维护一下让每个下标只出现一次就可以了. =>作为剪枝条件 [代码] /* 1.Shoud i ...
- onWindowFocusChanged-屏幕焦点函数回调情况
1.这个函数的具体作用不太清楚,但网上有人说是 ,当activity得到或者失去焦点的时候,就会调用这个方法 先看如下代码 @Override public void onWindowFocusCha ...
- C语言库函数，头文件
参看:https://zhidao.baidu.com/question/328173842.html 该文件包含了的C语言标准库函数的定义 stdlib.h里面定义了五种类型.一些宏和通用工具函数. ...
- Java基础学习总结（54）——JSON和Map转换的工具类
在pom.xml文件中引入如下jar <dependency> <groupId>commons-lang</groupId> <artifactId> ...
- VMware Windows安装详细过程(详细图解)
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一.概论 简介:虚拟机(Virtual Machine)指通过软件模拟的具有完整硬件系统功能的.运行在一个完全隔离环境中的完整计算 ...
- flask的使用（一）
1.程序基本的说明 #-*-encoding=utf--*- 从flask中引入类 from flask import Flask ,render_template import config 初始化 ...
- 浅谈求lca
lca即最近公共祖先,求最近公共祖先的方法大概有3种,其实是窝只听说过3种,这3种做法分别是倍增求lca,树剖求lca和tarjan求lca,但是窝只会前2种,所以这里只说前2种算法了. 首先是倍增求 ...
- POJ 3086 Triangular Sums （ZOJ 2773)
http://poj.org/problem?id=3086 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1773 让你计算两 ...