Posicionamiento de items

Los grid items pueden ocupar celdas específicas o abarcar varias filas / columnas mediante propiedades dedicadas.

grid-column y grid-row: permiten definir en qué fila / columna comienza y termina un item.
grid-area: combina en una sola propiedad la fila y columna de inicio / fin.

Ejemplo

En este ejemplo dinámico, podemos comprobar cómo con grid-column / grid-row le decimos al elemento con la clase positioning que ocupe las columnas 1 y 2, y las filas 1 y 2. Con grid-area le decimos al elemento con la clase positioning que coja la fila 1 y 2, y la columna 3.

Selecciona positioning:

grid-column / grid-rowgrid-area

ResultadoEn vivoAncho del contenedor100%

html

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child positioning">3</div>
  <div class="child">4</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child positioning">3</div>
  <div class="child">4</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  padding: 0.5rem;
}

.positioning {
  background: #d9d2f5;
  grid-column: 1 / 3; /* grid-column: col-start / col-end */
  grid-row: 1 / 3; /* grid-row: row-start / row-end */
}

.child {
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  padding: 0.5rem;
}

.positioning {
  background: #d9d2f5;
  grid-column: 1 / 3; /* grid-column: col-start / col-end */
  grid-row: 1 / 3; /* grid-row: row-start / row-end */
}

.child {
  padding: 1rem;
}

Edita el código o usa los selectores: el resultado cambia al instante.