/* EJEMPLO INICIAL */
.grid__container {
  display: grid;
  grid-template-columns: 200px 200px 1fr;
  grid-template-rows: 200px 200px 200px;
  border: 1px solid black;
  background-color: gray;
  gap: 10px;
  /* column-gap: 10px;
    row-gap: 10px; */
}

.grid__item {
  border: 2px solid black;
  background-color: lightgray;
}

.grid__item:first-child {
  background-color: red;
  /* grid-column: 1/3; */
  grid-column: 1 / span 2;
  grid-row: 1/3;
}

.grid__item:nth-child(2) {
  background-color: blue;
  grid-column: 3/5;
}

/* EJEMPLO REPEAT */

.grid__container {
  display: grid;

  /* grid-template-columns: repeat(3, 1fr); Lo mismo que escribir 1fr 1fr 1fr */
  /* grid-template-columns: repeat(2, 200px) 1fr;  Lo mismo que escribir 200px 200px 1fr */
  /* grid-template-columns: repeat(3, min-content); Las columnas adoptan el mínimo tamaño de su contenido */
  /* grid-template-columns: repeat(3, max-content); Las columnas adoptan el máximo tamaño de su contenido */

  grid-template-columns: repeat(
    3,
    minmax(200px, 350px)
  ); /* Cada columna adopta un mínimo de 200px y un máximo de 350px */
  grid-template-rows: 200px 200px 200px;
  border: 1px solid black;
  background-color: gray;
  gap: 10px;
}

.grid__item {
  border: 2px solid black;
  background-color: lightgray;
}
