<div class="container">
  <header>Header Section</header>
  <div class="brand">Brand Section</div>
  <aside>Aside Section</aside>
  <main>Main Section</main>
  <div class="sidebar">Sidebar Section</div>
  <footer>Footer Section</footer>
</div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;

  display: flex;
  font-family: "Exo", Arial, sans-serif;
  background-color: #f7f7f7;
}

header {
  background-color: #f1c2c6;
}

.brand {
  background-color: #dac2f1;
}

aside {
  background-color: #ccf1c2;
}

main {
  background-color: #c2e9f1;
}

.sidebar {
  background-color: #f1ebc2;
}
footer {
  background-color: #09f;
}

.container > * {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  font-size: 2rem;
  color: #fff;
  text-shadow: 1px 1px 1px rgb(0 0 0 / 0.35);
}

.container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 80px 160px 1fr 60px;
  grid-template-areas:
    "header header header header header header header header header header header header"
    "brand brand brand brand brand brand brand brand brand brand brand brand"
    "aside aside aside main main main main main main sidebar sidebar sidebar"
    "footer footer footer footer footer footer footer footer footer footer footer footer";
}

header {
  grid-area: header;
}
.brand {
  grid-area: brand;
}
aside {
  grid-area: aside;
}
main {
  grid-area: main;
}
.sidebar {
  grid-area: sidebar;
}
footer {
  grid-area: footer;
}