[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 语言可以用来编写复杂的大型应 ...
随机推荐
- Atcoder At Beginner Contest 068 D - Decrease (Contestant ver.)
D - Decrease (Contestant ver.) Time limit : 2sec / Memory limit : 256MB Score : 600 points Problem S ...
- 使用Python开发轻量级的Web框架以及基于WSGI的服务器来实现一个网站页面
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 目录 一丶项目说明 二丶数据准备 三丶使用网络TCP开发一个基于WSGI协议的Web服务器 四丶使用python3开发一个轻量级的 ...
- System.out.println 的多线程并发问题
假设println函数的參数为常量则不会出现线程并发问题,可是假设參数为表达式形式.则JVM在运行println函数的时候会分为几步来运行,从而造成并发问题. 例如以下样例所看到的: package ...
- HTML高级标签之表格标签
前面学习了一下HTML的经常使用标签, 今天開始高级标签之路! 一.表格标签 1.作用: 创建一张表格 2.各属性作用: <table cellspacing="0" cel ...
- 1.JPA概要
转自:https://www.cnblogs.com/holbrook/archive/2012/12/30/2839842.html JPA定义了Java ORM及实体操作API的标准.本文摘录了J ...
- 解决Cookie乱码
在Asp.net的HttpCookie中写入汉字,读取值为什么全是乱码?其实这是因 为文字编码而造成的,汉字是两个编码,所以才会搞出这么个乱码出来!其实解决的方法很简单:只要在写入Cookie时,先将 ...
- Python的数组合并
https://blog.csdn.net/hustqb/article/details/78090365 TypeError: can only concatenate list (not &quo ...
- 无法解决 React 启动的报错
E:\React\react_blank>npm start > react_blank@0.1.0 start E:\React\react_blank > react-scrip ...
- 图像处理 Mine
1)中值滤波:排序取中间值.作用:去噪点 1.1)均值滤波; 1.2)高斯模糊:执行高斯模糊,然后改混合模式,改成叠加.柔光或者深色.就能得到平滑而不模糊的效果. 2)腐蚀.膨胀:开运算(腐蚀后膨胀) ...
- 2017.1-TOP5 Android开源库
Colorful (Github) Colorful简单实用,通过这个开源库可以通过编码的方式来改变应用的主题,不再需要定义不同的style dependencies { compile 'com.g ...