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. setInterval 传参数

    <script type="text/javascript" > window.onload=function(){ for(var i=1;i<3;i++){ ...

  2. SSO单点登录学习总结（2）——基于Cookie+fliter单点登录实例

    1.使用Cookie解决单点登录 技术点: 1.设置Cookie的路径为setPath("/").即Tomcat的目录下都有效 2.设置Cookie的域setDomain(&quo ...

  3. POJ——T2271 Guardian of Decency

    http://poj.org/problem?id=2771 Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 5932   A ...

  4. 7.3 GROUP BY的“新”功能

    7.3 GROUP BY的"新"功能正在更新内容,请稍后

  5. 1.JPA概要

    转自:https://www.cnblogs.com/holbrook/archive/2012/12/30/2839842.html JPA定义了Java ORM及实体操作API的标准.本文摘录了J ...

  6. Python的主成分分析PCA算法

    这篇文章很不错:https://blog.csdn.net/u013082989/article/details/53792010 为什么数据处理之前要进行归一化???(这个一直不明白) 这个也很不错 ...

  7. JQuery EasyUI Combobox 实现省市二级联动菜单

    //编辑改动或新增页面联动能够这样写 jQuery(function(){ // 省级 $('#province').combobox({ valueField:'itemvalue', //值字段 ...

  8. Android Gradle统一依赖管理

    目的: 避免在依赖包出新版本时,需要对每个module中的build.gradle文件都进行修改(如appcompat-v7包),使用这种方式即只需一次修改. 方法一 在项目的根目录创建一个gradl ...

  9. liunx基本操作常用命令

    liunx通常用作服务器,运行服务器软件,服务器要等待,类似超市学关键命令操作 内核,外壳 shell命令跟内核打交道用的是发行版本,不是内核,Radhat公司的CentOS,阿里巴巴也用这个 liu ...

  10. 【习题 3-8 UVA - 202】Repeating Decimals

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 余数出现循环节. 就代表出现了循环小数. [代码] #include <bits/stdc++.h> using nam ...