Diseño intrínseco: dimensionamiento basado en el contenido

El diseño intrínseco, término acuñado por Jen Simmons, consiste en dejar que el contenido determine su propio tamaño en lugar de imponer dimensiones explícitas en píxeles. CSS proporciona palabras clave de dimensionamiento intrínseco que permiten crear diseños naturalmente adaptables sin sobrescrituras controladas por puntos de interrupción.

min-content: el tamaño más pequeño que permite contener el contenido sin desbordamiento (en el caso del texto, se ajusta en cada límite entre palabras). max-content: el tamaño necesario para mostrar el contenido en una sola línea sin saltos. Ambos reflejan las dimensiones reales del contenido.

fit-content equivale a min(max-content, max(min-content, available)). Crece según el contenido hasta alcanzar el espacio disponible y, después, ajusta el texto. Es perfecto para botones y etiquetas que deben tener el ancho de su texto, pero no superar el de su contenedor.

minmax(min, max) en grid-template-columns establece el tamaño mínimo y máximo de una pista. minmax(200px, 1fr) crea una columna de al menos 200px que puede crecer. Combinado con auto-fill, permite crear cuadrículas intrínsecamente adaptables.

Ambos llenan la fila con tantas pistas como sea posible. auto-fill conserva las pistas vacías (manteniendo el número de columnas). auto-fit contrae las pistas vacías para que las pistas ocupadas se expandan y llenen el espacio. Use auto-fit en diseños determinados por el contenido que deban expandirse hasta ocupar todo el ancho disponible.

clamp(min, preferred, max) mantiene un valor dentro de ciertos límites. font-size: clamp(1rem, 2.5vw, 1.5rem) escala entre 1rem y 1.5rem según el ancho de la ventana gráfica: tipografía fluida sin consultas de medios.

grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) crea una cuadrícula adaptable que tiene una sola columna en ventanas gráficas muy estrechas y añade columnas automáticamente a medida que hay espacio. Sin consultas de medios ni JavaScript.

aspect-ratio: 16/9 hace que un elemento mantenga sus proporciones mientras cambia su ancho. Combinado con width: 100%, un contenedor de vídeo llena su elemento padre y mantiene siempre una proporción de 16:9, sin JavaScript ni trucos de relleno basados en porcentajes.

El diseño intrínseco se combina con las propiedades lógicas de CSS (inline-size, block-size, margin-inline) para crear diseños que funcionan tanto en modos de escritura horizontal como vertical. El dimensionamiento intrínseco se adapta automáticamente a la dirección de escritura.

Fijo: width: 300px — siempre 300px, independientemente del contenido. Intrínseco: width: fit-content — tan ancho como el contenido, dentro de las restricciones. Los diseños fijos necesitan puntos de interrupción para adaptarse; los diseños intrínsecos se ajustan por sí solos según su contenido y contexto.

El diseño intrínseco es más eficaz cuando el tamaño del contenido varía de forma natural. Forzar el dimensionamiento intrínseco cuando el contenido es conocido y uniforme añade complejidad sin aportar beneficios. Use tamaños explícitos para elementos fijos de la interfaz, como la navegación y la barra de herramientas; use el dimensionamiento intrínseco para las áreas de contenido.

¿Qué hace auto-fit de forma diferente a auto-fill en grid-template-columns?

El diseño intrínseco utiliza palabras clave de dimensionamiento de CSS (min-content, max-content y fit-content), minmax() con auto-fit, clamp() para un escalado fluido y aspect-ratio para crear diseños determinados por las dimensiones del contenido en lugar de los puntos de interrupción de la ventana gráfica. El resultado son diseños naturalmente adaptables, con menos CSS y menos consultas de medios.