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:

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:

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.