Ubicar ítems: grid-column, grid-row y span

Hasta ahora los ítems se ubican en orden automático — el algoritmo de placement de Grid los coloca uno tras otro. Con grid-column y grid-row tomás el control: decidís exactamente qué celda o rango ocupa cada ítem.

Las líneas del grid

Las pistas están separadas por líneas numeradas desde 1. Un grid de 3 columnas tiene 4 líneas de columna (1, 2, 3, 4). Una de 2 filas tiene 3 líneas de fila.

Columna: 1    2    3    4
         |    |    |    |
Fila: 1 —+----+----+----+
         | c1 | c2 | c3 |
Fila: 2 —+----+----+----+
         | c4 | c5 | c6 |
Fila: 3 —+----+----+----+

El error de principiante más frecuente: confundir líneas con celdas. La línea 1 es el borde izquierdo del grid. grid-column: 1 / 3 ocupa las columnas 1 y 2 (entre las líneas 1 y 3) — dos columnas, no tres.

`grid-column` y `grid-row`

/* El ítem ocupa desde la línea 1 hasta la línea 3 en columnas (= columnas 1 y 2) */
.destacado {
  grid-column: 1 / 3;
}

/* Ocupa la columna 3 y las filas 1 y 2 */
.lateral {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}

La sintaxis inicio / fin usa números de línea. grid-column: 1 / 3 es shorthand de grid-column-start: 1; grid-column-end: 3.

`span` — “ocupá N pistas desde donde estás”

span es una alternativa: en vez de decir las líneas exactas, decís cuántas pistas debe ocupar el ítem desde su posición.

/* Ocupa 2 columnas desde donde el placement lo ubique */
.destacado {
  grid-column: span 2;
}

/* Ocupa 3 filas desde la fila 2 */
.item {
  grid-row: 2 / span 3;
}

Con span el ítem no tiene posición fija de inicio — el algoritmo lo ubica en la primera celda disponible y desde ahí lo expande. Con 1 / 3 fijás tanto el inicio como el fin.

Lo que el motor no puede validar: que el layout visual quede con el destacado a la izquierda y el lateral a la derecha. Lo verificás en el preview.

Tu turno: completá grid-column en .destacado y grid-column + grid-row en .lateral. Observá en el preview cómo el ítem destacado ocupa el doble de espacio y el lateral abarca ambas filas.