Colocar items: líneas, span y áreas

Las líneas de la rejilla

Aquí está la confusión número uno de Grid: se cuentan las líneas, no las celdas. Una rejilla de N columnas tiene N+1 líneas verticales, numeradas desde 1. Tres columnas se delimitan con las líneas 1, 2, 3 y 4 (cuatro líneas para tres huecos, como los postes de una valla). Un item se coloca indicando entre qué líneas empieza y termina.

.destacado {
  grid-column: 1 / 3;   /* desde la línea 1 hasta la 3: ocupa 2 columnas */
  grid-row: 1 / 2;      /* desde la línea 1 hasta la 2: una fila */
}

span: ocupar varias celdas

Si no quieres contar líneas, usa la palabra clave span para indicar cuántas pistas ocupar a partir de donde empiece el item:

.destacado {
  grid-column: span 2;  /* ocupa 2 columnas, empiece donde empiece */
  grid-row: span 2;     /* y 2 filas */
}

Esto es perfecto para esa "foto destacada" que ocupa media galería, sin atarte a posiciones concretas: si reordenas las tarjetas, el destacado sigue ocupando su tamaño sin que toques números de línea.

⚠️ TRAMPA CLÁSICA: span 2 no es "ir hasta la línea 2", es "ocupar 2 pistas". Si mezclas grid-column: 2 / span 2 cuenta desde la línea 2 y avanza 2 huecos. No confundas el número de línea con el número de celdas a ocupar.

Áreas con nombre: la maqueta visual

La forma más legible de maquetar una página es dibujarla con grid-template-areas. Defines la rejilla como un "mapa" de nombres y luego asignas cada item a su zona con grid-area:

.pagina {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "cabecera cabecera"
    "menu     contenido"
    "pie      pie";
  gap: 12px;
}

.cabecera  { grid-area: cabecera; }
.menu      { grid-area: menu; }
.contenido { grid-area: contenido; }
.pie       { grid-area: pie; }

El nombre repetido (cabecera cabecera) hace que esa zona abarque varias columnas. Un punto (.) deja una celda vacía. La gran ventaja: el CSS se lee como un dibujo ASCII de la página, y para cambiar todo el layout solo reescribes el mapa.

⚠️ TRAMPA CLÁSICA: el "mapa" tiene que ser un rectángulo perfecto. Todas las filas necesitan el mismo número de columnas y cada área debe formar un bloque rectangular (nada de zonas en forma de L). Si una fila tiene un nombre de menos, la regla entera se ignora en silencio y te vuelves loco buscando el fallo.