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. 判断移动端跳转，从移动端来的不跳转。利用localStorage保存状态，window.location.pathname跳转不同的url

    手机访问 www.yourdomain.com 跳转,从m.yourdomain.com来的不跳转. 访问www.yourdomain.com/category8, 跳转到m.yourdomain.c ...

  2. vue中v-for的用法以及参数的作用

    <template> <div> <div class="content clearfix" v-on:click="goorderingD ...

  3. geotools修改shapefile 属性名乱码问题

    在GeoServer中文社区的讨论地址为:http://opengeo.cn/bbs/read.php?tid=1701&page=e&#a 使用geotools修改shapefile ...

  4. 使用Spring框架的好处

    转自:https://www.cnblogs.com/hoobey/p/6032506.html 在SSH框假中spring充当了管理容器的角色.我们都知道Hibernate用来做持久层,因为它将JD ...

  5. [JSOI2009]计数问题

    一个n*m的方格,初始时每个格子有一个整数权值.接下来每次有2种操作: 改变一个格子的权值: 求一个子矩阵中某种特定权值出现的个数. 输入输出格式 输入格式: 第一行有两个数N,M. 接下来N行,每行 ...

  6. 无法显式调用运算符或访问器 错误处理方法 DLL study

    无法显式调用运算符或访问器 错误处理方法 转 无法显式调用运算符或访问器 错误处理方法 反汇编一个dll类库,导出的项目会报出很多bug,其中主要的就是“无法显式调用运算符或访问器”这个错误,看了一下 ...

  7. 洛谷 P2069 松鼠吃果子

    P2069 松鼠吃果子 题目描述 有N个一种松鼠喜欢吃的果子由下向上串排成一列,并标号1,2,...N.一只松鼠从最下果子开始向上跳,并且第i次跳可以一次跳过i*i*i除以5的余数+1个果子(=i*i ...

  8. 截止频率-3db

    关于-3db截止频率 (2013-06-22 10:47:02) 转载▼   分类: 信号.电路 关于-3db截止频率 为什么当信号衰减了-3db的时候就算是截止频率了.这里面有什么高深的内涵.毕竟这 ...

  9. uva_658_It&#39;s not a Bug, it&#39;s a Feature!(最短路)

    It's not a Bug, it's a Feature! Time Limit: 3000MS   Memory Limit: Unknown   64bit IO Format: %lld & ...

  10. Microsoft iSCSI Software Target 快照管理

    Microsoft iSCSI Software Target 支持快照管理,可以对设备进行手工创建快照.快照任务计划.快照回滚等操作. 首先配置iscsi 目标及设备映射关系,并在客户端通过发起程序 ...