Retos de CSS Grid del curso de Platzi

Reto 1

        
          
section {
  width: auto;
  display: grid;
  grid-auto-columns: 150px;
  grid-template-rows: 150px 150px 150px;
  grid-auto-flow: column;
  gap: 15px;
  padding: 15px;

  div {
    background: #0071cf;
    display: inherit;
    place-content: end;

    span {
      background: #1b99ff;
      color: black;
      font-size: 3rem;
      padding: 0 5px;
      font-weight: bold;
    }
  }
}

Reto 2

        
          
section {
  width: 100%;
  height: 500px;
  display: grid;
  place-content: center;
  grid-template-columns: 150px 150px;
  grid-auto-rows: 150px;
  gap: 50px;

  div {
    background: #0071cf;
    display: inherit;
    place-content: end;

    span {
      background: #1b99ff;
      width: 50px;
      height: 75px;
    }
  }
}

Reto 3

        
          
section {
  width: 100%;
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-auto-rows: 150px;
  place-content: center;
  gap: 10px;
  grid-template-areas:
    "item-1  item-2  item-2"
    "item-3  item-2  item-2"
    "item-4  item-4  item-5"
    "item-6  item-7  item-5"
    "item-9  item-7  item-8"
    "item-10 item-10 item-8"
    "item-10 item-10 item-11";
}
[class^="item-"] {
  border-radius: 5px;
}
.item-3, .item-5,
.item-6, .item-10 {
  background: #0071cf;
}
.item-1, .item-4,
.item-9, .item-8 {
  background: #1b99ff;
}
.item-2, .item-7, .item-11 {
  background: #00388f;
}
.item-1  { grid-area: item-1;  }
.item-2  { grid-area: item-2;  }
.item-3  { grid-area: item-3;  }
.item-4  { grid-area: item-4;  }
.item-5  { grid-area: item-5;  }
.item-6  { grid-area: item-6;  }
.item-7  { grid-area: item-7;  }
.item-8  { grid-area: item-8;  }
.item-9  { grid-area: item-9;  }
.item-10 { grid-area: item-10; }
.item-11 { grid-area: item-11; }