[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: 1; /*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>

相关阅读:
MSP430：输入捕获
MSP430：串口输出
测试输出时钟频率
C# MySql Select
C# MySql 连接
MSP430:PWM产生
MSP430：定时器学习TimerA
MSP430：中断简介
MSP430 PIN 操作寄存器
剑指offer---包含min函数的栈

原文地址：https://www.cnblogs.com/Answer1215/p/6666656.html