body {
  /* background-image: url(negro.jpg); */
  /* background-repeat: no-repeat; */
  /* background-size: 100%; */
  background-color: #ff9700;
}
h1 {
  color: 	#0040ff;
  text-align: center;
  font-family: Verdana;
}
.container{
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  background-color: #002fd1;
  padding: 5px;
  gap: 5px;
}
/* fr es una fracción del espacio disponible. Por ejemplo:
grid-template-rows: 1fr 2fr 1 fr; esto es 25% 50% 25% */
/* Puedes usar repeat() para evitatr tener que copiar todas las filas y columnas.
Ej: repeat(2, 100px) */
/* minmax() para las dimensiones mínimas y máximas de un item */
/* gap() para el espacio entre items */
/* em es la longitud de la fuente */
.container div {
  background-color: #002fd1;
  color: 	black;
  border: solid #ffaa00;
  padding: 10px;
  font-size: 60 px;
  text-align: center;
}
.item-1{
  grid-row: 1/2;
  grid-column: 1/4;
}
.item-2{
  grid-row: 2/3;
  grid-column: 1/2;
}
.item-3{
  grid-row: 2/3;
  grid-column: 2/3;
}
.item-4{
  grid-row: 2/3;
  grid-column-start: 3/4;
}
/* Métodos de definir el area de un item:
grid-row/column-start/end
grid-row/column: inicio/final
grid-row/column: span número| Esto para el número de espacios que quieres expanda desde donde haya espacio.
grid-area: inicio fila inicio columna final fila final columna
 */
 /* Los items se pueden superponer sin problemas. Para establecer el orden de capas z-index */