.grid {
  width:auto;
  min-height: 900px;
  display: grid;
  grid-template-areas:"Tbar Tbar Tbar Tbar Tbar Tbar Tbar Tbar"
                      "left nav1 nav2 nav3 nav4 nav5 nav6 right"
                      "left con con con con con con right"
                      "left foot foot foot foot foot foot right";
  grid-template-rows: 250px 50px auto 75px;
  grid-template-columns: 10% repeat(6, 13.3%) 10%;
  grid-gap: 5px 5px;
  border: 2px crimson solid;
}

.Tbar{
  grid-area: Tbar;
  background-color: ;
  background-size: 50%;
}

.navbar{
  font-family: 'Julius Sans One', sans-serif;
  border: 2px solid black;
  text-align: center;
  font-size: 30px;
  position: relative;
}

.navbar:active{
  top: 2px;
}

.nav1{
  grid-area: nav1;
  background-color: violet;
  color: lightgreen;
}

.nav2{
  grid-area: nav2;
  background-color: blue;
}

.nav3{
  grid-area: nav3;
  background-color: aquamarine;
}

.nav4{
  grid-area: nav4;
  background-color: green;
}

.nav5{
  grid-area: nav5;
  background-color: yellowgreen;
}

.nav6{
  grid-area: nav6;
  background-color: yellow;
}

.left{
  grid-area: left;
  background-color: Darkgreen;
}

.right{
  grid-area: right;
  background-color: Maroon;
}

.con{
  grid-area: con;
  background-color: grey;
}

.foot{
  grid-area: foot;
  background-color: lightgrey;
}
