Re-ordering Grid Items

Re-ordering Grid Items by Wes Bos

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/wesbos/css-grid/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;
}