Hasta ahora, todas las celdas de tu Grid se han comportado con bastante disciplina: una celda, un hueco. Pero los layouts reales rara vez son tan obedientes.
A veces quieres que una tarjeta destacada ocupe más ancho que las demás. O que un bloque importante se extienda durante dos filas. O que una pieza del diseño rompa la monotonía sin romper la estructura.
Para eso existen grid-column y grid-row.
En Grid, cada item puede ocupar una o varias columnas y una o varias filas. No hace falta moverlo con píxeles ni jugar al Tetris manualmente. Solo le dices cuántas pistas quieres que abarque.
El caso más común es este:
Eso significa: "esta tarjeta debe ocupar el ancho de dos columnas".
Si el contenedor tiene tres columnas, la tarjeta destacada se comerá dos de ellas y dejará una libre para que Grid siga colocando el resto.
span es una forma muy humana de pensarPodrías colocar elementos usando números de línea, como grid-column: 1 / 3. Es válido. Pero para empezar, span suele ser más intuitivo porque habla en el idioma de la intención:
grid-column: span 2: ocupa 2 columnas.grid-row: span 2: ocupa 2 filas.No estás diciendo "empieza exactamente aquí y termina exactamente allá". Estás diciendo "quiero que este bloque sea más grande".
Lo bonito de esto es que no tienes que reorganizar manualmente todos los demás elementos. Cuando un item ocupa más espacio, Grid vuelve a repartir las demás piezas alrededor de ese hueco.
Es decir:
Esta combinación de control y piloto automático es lo que hace que Grid sea tan agradable para layouts editoriales, dashboards y galerías.
Aquí estás diciendo:
gap..destacada ocupa el ancho de 2 columnas.El resultado visual ya deja de parecer una tabla rígida y empieza a sentirse como un layout con jerarquía.
Haz que .panel use Grid con tres columnas iguales y consigue que .destacada ocupe dos columnas usando grid-column: span 2.
Una cuadrícula deja de ser plana en cuanto una pieza se atreve a destacar...