Grid X Flexbox

by juniorcoding

HTML

<div class="container" >
  <header>
    <ul>
      <li>Home</li>
      <li>Produtos</li>
      <li>Contato</li>
      <li>Sobre</li>
    </ul>
  </header>
  <aside>Aside</aside>
  <main>Main</main>
  <footer>Footer</footer>
</div>

SCSS

body{
  min-height: 300px;
}

.container{
  display: grid;
  color: white;
  grid-template-columns: 200px auto;
  grid-template-rows: 70px auto 70px;
  grid-template-areas: "header header" "aside main" "footer footer";
  font-family: "Courier";
  font-weight: 700;
}

header{
  background-color: darkred;
  grid-area: header;
  ul{
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    li{
      cursor: pointer;
      padding: 10px;
      color: #FFF;
      font-family: "Courier";
      font-weight: bold;
      &:hover{
        opacity: 0.5;
        background-color: gray;
      }
    }
  }
}

aside{
  background-color: darkgreen;
  grid-area: aside;
}

main{
  background-color: darkorange;
  grid-area: main;
  height: 200px;
}

footer{
  background-color: darkblue;
  grid-area: footer;
}