grid-column, grid-row

grid-column y grid-row son las propiedades que le dicen a un ítem grid dónde vivir dentro de la cuadrícula: entre qué líneas de columna y entre qué líneas de fila debe extenderse. Por defecto, el algoritmo de placement de Grid ubica los ítems en orden automático — uno tras otro, columna a columna. Con grid-column y grid-row tomás el control y llevás un ítem exactamente a la celda o rango que necesitás, independientemente del orden en el HTML.

El modelo mental clave es que estas propiedades trabajan con líneas, no con celdas. Un grid de 3 columnas tiene 4 líneas de columna: 1, 2, 3 y 4. La línea 1 es el borde izquierdo del contenedor; la línea 4 es el borde derecho. Cuando escribís grid-column: 1 / 3, estás diciendo “desde la línea 1 hasta la línea 3” — eso ocupa dos columnas (las pistas entre línea 1 y línea 2, y entre línea 2 y línea 3). El error más común de quienes aprenden Grid es contar celdas en vez de líneas: 1 / 3 son 2 columnas, no 3.

Ambas propiedades comparten exactamente la misma lógica: grid-column opera en el eje en línea (horizontal en escritura occidental) y grid-row en el eje de bloque (vertical). Se usan en el ítem, nunca en el contenedor. La cuadrícula la define el contenedor con grid-template-columns y grid-template-rows; el ítem simplemente se ubica en ella.

Sintaxis

/* Número de línea: inicio / fin */
.item {
  grid-column: 1 / 3;   /* ocupa columnas 1 y 2 (entre líneas 1 y 3) */
  grid-row: 1 / 2;      /* ocupa fila 1 (entre líneas 1 y 2) */
}

/* span N — extenderse N pistas desde la posición actual */
.item {
  grid-column: span 2;      /* ocupa 2 columnas desde donde caiga */
  grid-column: 2 / span 2;  /* empieza en línea 2, se extiende 2 pistas */
}

/* Líneas negativas — cuentan desde el borde final */
.item {
  grid-column: 1 / -1;   /* de borde a borde: ocupa todas las columnas */
  grid-column: -2 / -1;  /* la última columna */
}

/* Sin fin explícito — ocupa 1 pista */
.item {
  grid-column: 2;   /* = grid-column: 2 / 3 */
}

Valores y sub-bloques

Número de línea (rango inicio / fin)

La forma básica es inicio / fin con números de línea. El número de línea empieza en 1 desde el borde de inicio del contenedor. La pista ocupa el espacio entre la línea de inicio (inclusive) y la línea de fin (exclusive).

grid-column: 1 / 3;  /* pistas entre línea 1 y línea 3 = 2 columnas */
grid-column: 2 / 4;  /* pistas entre línea 2 y línea 4 = 2 columnas */
grid-row: 1 / 2;     /* la primera fila */

El error número uno: grid-column: 1 / 3 son 2 columnas, no 3. Se cuenta el espacio entre líneas, no las líneas. 1 / 2 = 1 pista; 1 / 3 = 2 pistas; 1 / 4 = 3 pistas.

span N — extenderse N pistas

span N le dice al ítem “ocupá N pistas desde donde te ubiques”. La diferencia con el rango explícito es que span no fija la línea de inicio — el algoritmo de auto-placement decide dónde empieza el ítem, y desde ahí se extiende N pistas.

.item { grid-column: span 2; }         /* 2 columnas desde posición automática */
.item { grid-column: 2 / span 2; }     /* fija inicio en línea 2, ocupa 2 pistas */
.item { grid-row: span 3; }            /* 3 filas desde donde caiga */

2 / span 2 es equivalente a 2 / 4. La ventaja de span es que es más legible cuando el número exacto de la línea final no importa — lo que importa es cuántas pistas ocupa.

Líneas negativas — contar desde el fin

Las líneas también se pueden numerar desde el final del grid explícito: -1 es la última línea (el borde de fin), -2 es la penúltima, y así. Esta numeración negativa permite referencias relativas al fin sin conocer el número exacto de pistas.

/* Ancho completo — de borde a borde */
.item { grid-column: 1 / -1; }

/* La última columna */
.item { grid-column: -2 / -1; }

/* Las dos últimas columnas */
.item { grid-column: -3 / -1; }

El patrón grid-column: 1 / -1 es especialmente útil para elementos que deben ocupar todo el ancho del grid (un header, un banner) sin tener que saber cuántas columnas hay.

Los longhands: grid-column-start, grid-column-end, grid-row-start, grid-row-end

grid-column es el shorthand de grid-column-start y grid-column-end. grid-row es el shorthand de grid-row-start y grid-row-end. En la práctica se usa siempre el shorthand:

/* Equivalentes */
.item { grid-column: 1 / 3; }
.item {
  grid-column-start: 1;
  grid-column-end: 3;
}

/* Con span */
.item { grid-column: 2 / span 2; }
.item {
  grid-column-start: 2;
  grid-column-end: span 2;
}

Los longhands son útiles solo cuando necesitás declarar inicio y fin por separado — por ejemplo, en media queries donde solo cambia uno de los dos valores.

Cuándo usarlo

Cuando el layout tiene zonas con nombres semánticos (header/main/footer), grid-template-areas con grid-area es más legible. grid-column/grid-row brillan cuando las posiciones son numéricas o cuando el layout cambia dinámicamente.

Resultado

Notas, gotchas e interacción

• Líneas, no celdas. grid-column: 1 / 3 son 2 columnas. El número de pistas que ocupa un ítem es siempre fin - inicio. Memorizar esto evita el 90 % de los errores de placement.
• span sin inicio fijo → el algoritmo de auto-placement decide. Esto es conveniente pero puede producir reordenamientos inesperados cuando hay otros ítems posicionados. Si necesitás control absoluto, fijá la línea de inicio explícitamente.
• Las líneas negativas solo funcionan sobre el grid explícito. Las filas y columnas creadas automáticamente (grid implícito, grid-auto-rows) no tienen líneas negativas. -1 es la última línea del grid declarado con grid-template-columns/grid-template-rows.
• Dos ítems en la misma celda se solapan. Grid permite que dos ítems ocupen el mismo área — se apilan según su orden en el código fuente (el posterior queda encima). Para cambiar el orden de apilamiento, se usa z-index en el ítem.
• grid-column sin grid-row (o viceversa) es perfectamente válido. El eje no declarado usa auto-placement. Es el caso más común: fijás la columna y dejas que las filas fluyan solas.
• Interacción con grid-template-areas. Si el contenedor usa grid-template-areas, las líneas numeradas conviven con los nombres de área. Se puede usar grid-column: 1 / 3 y grid-area al mismo tiempo, pero no en el mismo ítem — el segundo sobrescribe al primero.

Vigente / legacy

grid-column y grid-row son parte del estándar CSS Grid Level 1 (2017) y son baseline widely available. No existen alternativas legacy: los layouts de posicionamiento preciso previos a Grid usaban float y position: absolute, que no ofrecen alineación en dos ejes. Los nombres grid-column-gap/grid-row-gap (hoy column-gap/row-gap) son el único legado de nomenclatura que puede aparecer en código antiguo — no confundir con estas propiedades.