Re-ordering Grid Items

css-grid practice

by allen Yu

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/shunnien/css-grid25day/master/assets/style.css">
    <div class="container">
        <div class="item logo">LOGO</div>
        <div class="item nav">NAV</div>
        <div class="item content">
            <p>I'm the Content!</p>
        </div>
    </div>

CSS

.container {
            display: grid;
            grid-gap: 20px;
            grid-template-columns: repeat(10, 1fr);
        }

        .logo {
            grid-column: span 2;
            order: 2;
        }

        .nav {
            grid-column: span 8;
            order: 1;
        }

        .content {
            grid-column: 1/-1;
            order: 3;
        }