<body class="grid-12">
    <header class="grid-element bg-gray grid-header">Шапка сайта</header>
    <aside class="grid-element bg-red grid-aside">Сайдбар</aside>
    <main class="grid-element bg-blue grid-main">Основной контент</main>
</body>
body {
  margin: 0;
  font-family: sans-serif;
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  
  height: 100vh;
}

.grid-element {
  padding: 5px;
  
  font-size: 14px;
  color: #fff;
}

.bg-gray {
  background: #717790;
}

.bg-red {
  background: #ff3c41;
}

.bg-blue {
  background: #0ebeff;
}

.grid-header {
  grid-column: 1 / -1;
  grid-row: 1 / 3;
}

.grid-aside {
  grid-column: 1 / 5;
  grid-row: 3 / -1;
}

.grid-main {
  grid-column: 5 / -1;
  grid-row: 3 / -1
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.