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的更多相关文章

  1. [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 ...

  2. [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- ...

  3. CSS字体渐变 & 隐藏浏览器滚动条 & grid布局（转载）

    字体渐变  https://www.zhangxinxu.com/study/201104/css3-text-gradient-2.html 隐藏浏览器滚动条  https://blog.csdn. ...

  4. 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,就不保证输出的顺序. 那么, ...

  5. Back to Back Order Process

    Steps involved involved in back to back order process in oracle apps 1. Enter Sales Order 2. Book Sa ...

  6. Ext 可编辑的GridPanel

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. UVA 1085 House of Cards（对抗搜索）

    Description   Axel and Birgit like to play a card game in which they build a house of cards, gaining ...

  8. Linq技巧3——何时及怎么使用预先加载

    通常情况在你的应用程序中,一旦你要查询完数据的的时候,你知道使用实体来做什么. 假如你打印一份订单给顾客,你知道不包括组成订单的Items和Products信息,打印的信息是不完整的,所以查询时也需要 ...

  9. 9个常用ES6特性归纳(一般用这些就够了)

    ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应 ...

随机推荐

  1. windows7下安装Office2010提示需要安装MSXML6.10.1129

    平台:Windows 7 问题:刚刚下载的ghost Win 7,安装过程一切顺利,进入系统后把集成的软件全部卸载,清理完垃圾,安装了VC库,在安装Office2010时提示需要安装MSXML6.10 ...

  2. Vue Invalid handler for event "": got undefined

    原因:绑定的方法不是放在methods:{}里.比如我把绑定的函数写在了computed:{}里就会报这个错.

  3. 多线程中的&quot;断点&quot;续传《notify()和wait()》

    眼下在做一个项目.关于软件管理与下载的,预计项目提交日期定在6月9号.项目做了有20天了,可是在一个功能上卡住了.在这个项目中有一个功能----APK的下载须要实现. 相信大家都玩过非常多关于下载AP ...

  4. [转]Linq使用心得——SelectMany替代二重foreach循环

    本篇记录了Linq学习的心得,较为浅显,各位大牛请轻拍. 学习Linq其实已经很久了,但是一直没有使用的习惯,故水平也始终没有提高.近来刻意强迫自己用Linq来替代C# 2.0的一些写法.这里有一些心 ...

  5. time and datetime

    一.简述 我们在写代码的过程经常遇到时间模块,如果我们以后需要根据时间去筛选信息的话,那用户会更大,所以今天就来讲讲时间的两大模块:time & datetime 二.time模块 1.tim ...

  6. STL_算法_删除(unique、unique_copy)

    C++ Primer 学习中. . . 简单记录下我的学习过程 (代码为主) 全部容器适用 unique(b,e) unique(b,e,p) unique_copy(b1,e1,b2) unique ...

  7. tensorflow compile

    bazel  build  --spawn_strategy=standalone tensorflow/examples/label_image/...

  8. JS实现动画的四条优化方法

    JS实现动画的四条优化方法 1)如果使用的是setTimeout实现的轮询动画,在每一次执行方法之前需要把前面的设置的定时器清除掉 2)为了防止全局变量的污染,我们把定时器的返回值赋值给当前操作元素的 ...

  9. 小程序踩坑记- tabBar.list[3].selectedIconPath 大小超过 40kb

    重新启动微信小程序编辑器的时候遇到了这样的一个问题: tabBar.list[3].selectedIconPath 大小超过 40kb 微信小程序开发的过程之中总会出现这样或者那样的错误,需要我们耐 ...

  10. 【】minimum

    [链接]h在这里写链接 [题意] 给两个数字a,b,每次操作可以把a+1a+1,或把a∗k 问至少多少次操作可以使得a=b. 1<=a,b<=10^18,0 <= k <= 1 ...