提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

[CSS] Re-order the appearance of grid items using the order property

CSS The of Using order Property Grid re
2023-09-14 08:59:18 时间

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>

 

相关文章