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. idea添加自动编译

    话不多说,idea每次修改文件不自动编译到项目里,这里做一下一些操作 registry快捷键ctrl+shift+alt+/

  2. 处理async void 方法中无法捕捉异常信息

    利用 NuGet库 Nito.AsyncEx 中的 AsyncContext类. 添加NuGet类库,使用AsyncContext AsyncContext.Run(Action action);

  3. php中 重载（二）

    接着上一次说的重载,我们了解下php中的重载,方法的重载,假设有管重载定义,參考:php中 重载(一)这个文章,谢谢.作为刚開始学习的人,大牛勿喷: 基本是两个方法 __call,当调用对一个不可訪问 ...

  4. 如何从mysql数据库中取到随机的记录

    如何从mysql数据库中取到随机的记录 一.总结 一句话总结:用随机函数newID(),select top N * from table_name order by newid() ----N是一个 ...

  5. thinkphp动态注册路由

    thinkphp动态注册路由 一.总结 1.thinkphp使用路由步骤:a.config配置文件中开启路由  b.Route类的rule方法创建路由(在Routephp中)Route::rule(' ...

  6. Mongodb总结6-数据库启动、停止、备份等命令

    #启动Mongodb默认启动,需要在/data/db,Windows下对应的目录是Mongod.exe所在磁盘分区的根目录,例如Mongodb存放在D:/Mongodb,那么对应的路径就是D:/dat ...

  7. 【博客之星】CSDN2013博客之星--分析和预测

    本文纯属个人见解,多有得罪啊! 具体结果,还是看最后CSDN给的结果吧! 昵称 名字 题材 质量 数量 知名度 预测 阳光岛主 杨刚 Python,Clojure,SAE 很高 346+ 很大 一定( ...

  8. 洛谷——P1035 级数求和

    https://www.luogu.org/problem/show?pid=1035 题目描述 已知:Sn= 1+1/2+1/3+…+1/n.显然对于任意一个整数K,当n足够大的时候,Sn大于K. ...

  9. 初探springmvc

    Springmvc是什么 Springmvc(spring web mvc)是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进 ...

  10. php字符串函数分类总结

    php字符串函数分类总结 一.总结 explode  str_split  str_word_count  strtolower 二.php字符串函数分类总结 php内置了98个字符串函数(除了基于正 ...