CSS Grid: template-areas auto-fit minmax

grid-template-areas permite nombrar regiones mediante un formato visual de arte ASCII. Cada cadena representa una fila y cada palabra, una celda. Los puntos (.) representan celdas vacías. Asigne elementos con grid-area: name.

Cambie el diseño de template-areas en los puntos de interrupción para mover la barra lateral de una columna a una posición debajo del contenido principal en dispositivos móviles.

auto-fit: contrae las pistas vacías para que los elementos se estiren y llenen la fila. auto-fill: conserva la estructura de la cuadrícula aunque haya pistas vacías. Para cuadrículas adaptables de tarjetas, auto-fit es casi siempre la opción que necesita.

minmax(min, max) define una pista que tiene como mínimo min y como máximo max. Combinaciones habituales: minmax(0, 1fr) (totalmente flexible), minmax(200px, 1fr) (adaptable con un mínimo), minmax(auto, auto) (dimensionada según el contenido).

Use grid-column: span 2 para hacer que un elemento abarque dos columnas. Combínelo con grid-row: span 2 para crear un elemento destacado que ocupe un bloque de 2×2 en la cuadrícula.

grid-auto-flow: dense vuelve a llenar los espacios vacíos con elementos más pequeños. Resulta útil para diseños similares a un masonry en los que los elementos tienen tamaños variados.

La unidad fr siempre hace referencia al espacio disponible después de restar las pistas de tamaño fijo y los espacios. Mezclar fr con tamaños fijos ofrece la máxima flexibilidad: una barra lateral fija y un contenido principal flexible.

Estas propiedades controlan el tamaño de las pistas creadas implícitamente (cuando los elementos se colocan fuera de la cuadrícula explícita). grid-auto-rows: minmax(100px, auto) proporciona una altura mínima a las filas implícitas.

Chrome DevTools superpone las líneas de la cuadrícula y los nombres de las áreas en la página cuando hace clic en la insignia «grid» situada junto a un contenedor grid en el panel Elements. Úselo para depurar tamaños de pistas y colocaciones de elementos inesperados.

grid-template-columns: subgrid permite que una cuadrícula anidada se alinee con las pistas de la cuadrícula principal. Es compatible con todos los navegadores modernos desde 2023 y resulta fundamental para alinear el contenido interno de las tarjetas en una cuadrícula de tarjetas.

Grid es la mejor opción cuando necesita un control bidimensional explícito, es decir, cuando importan tanto las filas como las columnas. Si solo quiere colocar elementos en una fila o en una pila, Flexbox es más sencillo.

¿Qué valor de CSS Grid crea tantas columnas como quepan, con un mínimo de 200px, y hace que cada columna comparta por igual el espacio restante?

grid-template-areas crea diseños legibles con nombres. auto-fit + minmax permite crear cuadrículas adaptables sin media queries. Extienda los elementos por varias columnas y filas. El flujo automático denso rellena los espacios vacíos. Use la superposición de cuadrícula de DevTools para depurar. Subgrid alinea los elementos anidados con las pistas principales.