Posicionamiento explícito: líneas, span y capas

Hasta ahora Grid coloca los ítems en orden, celda tras celda. Hoy tomas el control: "tú vas de la columna 1 a la 3", "tú ocupas dos filas", "ustedes dos, en la MISMA celda, uno encima del otro". Es la herramienta de los layouts editoriales — y del bento grid del reto que se acerca.

Las líneas numeradas

Recuerda el vocabulario de la lección 1: 3 columnas = 4 LÍNEAS verticales, numeradas desde 1. Los ítems se anclan a líneas:

.destacada {
/* de la línea 1 a la 3 = ocupa las columnas 1 y 2 */
grid-column: 1 / 3;

/* lo mismo, dicho en celdas: "abarca 2" */
grid-column: 1 / span 2;

/* -1 = la última línea: "de lado a lado, mida lo que mida el grid" */
grid-column: 1 / -1;
}

El error universal de la primera semana con Grid: confundir líneas con columnas. grid-column: 1 / 2 es UNA columna (de la línea 1 a la 2), no dos. Piensa siempre en las rejas de la cancha, no en los espacios.

<div class="g">
<div class="c hero">hero: column 1/-1</div>
<div class="c alta">alta:<br>row span 2</div>
<div class="c">3</div><div class="c">4</div>
<div class="c">5</div><div class="c">6</div>
</div>

body { font-family: system-ui; padding: 20px; }
.g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.c { background: #6d28d9; color: white; border-radius: 8px; padding: 16px; font-weight: 600; font-size: 13px; text-align: center; display: grid; place-items: center; }
.hero { grid-column: 1 / -1; background: #4c1d95; }
.alta { grid-row: span 2; background: #b45309; }

Observa la colocación automática trabajando alrededor de tus órdenes: los ítems sin instrucciones (3, 4, 5, 6) fluyen rellenando los huecos que las piezas explícitas dejaron. Tú fijas las piezas importantes; Grid acomoda al resto.

La técnica de las capas

Dos ítems pueden ocupar LA MISMA área — y entonces se apilan. Así se hacen los heros con texto sobre imagen sin position absolute:

.hero {
display: grid;
grid-template-columns: 1fr;
}

.hero > img,
.hero > .texto {
grid-area: 1 / 1;   /* misma fila 1, misma columna 1: apilados */
}

.hero > .texto {
align-self: end;     /* el texto, abajo... */
justify-self: start;  /* ...y a la izquierda, SOBRE la imagen */
z-index: 1;
}

Mini-reto

En un grid de 3 columnas con 8 tarjetas, convierte la primera en "noticia destacada": grid-column: 1 / -1 y una fila más alta. Luego prueba la técnica de capas: un div con degradado y un texto compartiendo grid-area: 1 / 1, con el texto anclado abajo-izquierda.

Qué sigue

Controlas la retícula pieza por pieza. La próxima lección resuelve un problema que quizás ya sufriste sin saberlo: alinear los INTERIORES de tarjetas hermanas entre sí — subgrid, la herencia de retícula.