* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.btn {
  margin: 10px auto;
  padding: 10px;
  padding-top: 20px;
  background-color: darkgoldenrod;
  font-size: 20px;
  color: white;
}
.btn:hover {
  text-decoration: none;
  color: blue;
}
.container {
  background-color: darkgoldenrod;
  min-height: 100vh;
  display: grid;
  /*grid-template-columns: 1fr 2fr 1fr 1fr; /*definição de colunas*/
  grid-template-columns: repeat(3, 1fr); /*quantidades de colunas*/
  grid-auto-rows: minmax(
    110px,
    auto
  ); /*110 minim, auto de altura se adapta a tela*/
  gap: 10px 15px; /*espaçamento entre linhas e colunas*/
}
.item {
  border: 2px solid black;
  background-color: white;
  font-size: 30px;
  padding: 10px;
}
.item1 {
  grid-column: 1/4;
}
.item2 {
  grid-column: 1/3;
  grid-row: 2/4;
}
.item5 {
  grid-column: 1/4;
  grid-row: 4/6;
}
.item6 {
  grid-column: 1/3;
}
.item7 {
  grid-column: 1/3;
  grid-row: 6/7;
}
.item8 {
  grid-column: 3/4;
  grid-row: 6/8;
}
.item9 {
  grid-column: 1/4;
}

/*UTILIZANDO GRID TEMPLATE AREA*/
/*.container {
  grid-template-areas:
    "item1 item1 item1"
    "item2 item2 item3"
    "item2 item2 item4"
    "item5 item5 item5"
    "item5 item5 item5"
    "item6 item7 item7"
    "item8 item7 item7"
    "item9 item9 item9";
}
.item1 {
  grid-area: item1;
}
.item2 {
  grid-area: item2;
}
.item3 {
  grid-area: item3;
}
.item4 {
  grid-area: item4;
}
.item5 {
  grid-area: item5;
}
.item6 {
  grid-area: item6;
}
.item7 {
  grid-area: item7;
}
.item8 {
  grid-area: item8;
}
.item9 {
  grid-area: item9;
}*/