<div class="container">
  <div class="item logo">Logo</div>
  <div class="item nav">Nav</div>
  <div class="item content">Content</div>
</div>
:root {
  --yellow: #ffc600;
}

.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;
}

.item {
  display: grid;
  justify-content: center;
  align-items: center;
  border: 5px solid rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  font-size: 35px;
  background-color: var(--yellow);
}

.item p {
  margin: 0 0 5px 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.