grid.css

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
}
.grid {
  display: grid;
  height: 100%;
  width: 100%;
  grid-template-columns: 1fr 200px;
  grid-template-rows: 100px 100px 1fr 100px;
}
p {
  margin: 10px;
}
h1 {
  margin: 0;
  /* grid-area: 1 / 1 / 2 / span 2; */
  grid-column: 1 / 3;
  text-align: center;
  width: 100%;
  background-color: lightblue;
}
h2 {
  text-align: center;
  margin: 0;
}
h3 {
  text-align: center;
  margin: 0;
}
nav {
  grid-column: 1 / 4;
  display: flex;
  align-items: center;
  background-color: gray;
}

.navbar {
  display: flex;
}
nav ul {
  width: 100%;

  justify-content: space-around;
  list-style-type: none;
}

main {
  grid-column: 1/2;
  display: block;
}
.aside {
  grid-column: 2/3;
  background-color: grey;
}
.main-left {
  width: 100%;
}

.main-right {
  min-width: 200px;
}

footer {
  grid-column: 1/3;
  grid-row: 4/5;
  background-color: grey;
}