[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>

 

posted @ 2017-04-04 21:57  Zhentiw  阅读(132)  评论(0)    收藏  举报