# Decisiones de Intrinsic Layout: Contenido VS Cajas

> Aprenda a tomar decisiones de diseño basadas en la lógica intrínseca para crear layouts que se adapten de forma inteligente al contenido sin depender de rejillas rígidas.

*Tags: ux, tecnica, diseño-ui, product-design, desarrollo*

---


> [!info] Definición Rápida
> Las **Decisiones de Intrinsic Layout** son las reglas de diseño que definen cómo se posicionan y escalan los elementos de una interfaz basándose en las necesidades de su propio contenido (como el ancho del texto o el tamaño de la imagen) en lugar de ser forzados por una rejilla externa (Layout Grid).


## ¿Por qué el Intrinsic Layout es la mejor opción para productos dinámicos?

Históricamente, diseñamos webs con rejillas de 12 columnas. Es un sistema seguro y predecible, pero frágil. Si un nombre de usuario es demasiado largo, el diseño de la rejilla se rompe o el texto se corta. 

El **Intrinsic Layout** es el diseño "que respira". Se adapta a la realidad cambiante de los datos (nombres largos, traducciones a diferentes idiomas, imágenes de diferentes ratios de aspecto). Si el contenido es el rey, el Intrinsic Layout es su trono.

## Los 4 Pilares de la Decisión Intrínseca

Para que tu layout sea verdaderamente inteligente, debes aplicar estas estrategias:

### 1. "Póngase a su Gusto" (Flexbox y Wrap)
En lugar de decir "ponme 3 tarjetas por fila", dile al sistema "ponme tarjetas de 250px de ancho mínimo y rellena todo el espacio disponible". 
- **Resultado:** En un monitor gigante verás 6 tarjetas, en un tablet verás 2 y en un móvil 1. El diseño se auto-organiza sin necesidad de cientos de media queries manuales.

### 2. "Sin Espacio, No hay Foto" (Min-max Sizing)
Define anchos mínimos (`min-width`) y máximos (`max-width`) para tus componentes.
- **Ejemplo:** Un botón debe tener un ancho de al menos 44px (para ser cliquable), pero no debe crecer más allá de 300px aunque el texto diga "Compra ahora este producto increíble".

### 3. "El Contenido Manda" (Hug vs Fill)
En Figma (Auto Layout), decide si el contenedor debe:
- **Abrazar al Contenido (Hug):** El botón crece si el texto es largo. Úsalo para etiquetas (tags), botones o campos simples.
- **Llenar el Contenedor (Fill):** El elemento se estira para ocupar lo que le dejen sus hermanos. Úsalo para áreas de texto principal o para que un componente ocupe todo el ancho disponible.

### 4. "Gaps Invisibles" (Espaciado Basado en Tokens)
El secreto de un buen layout intrínseco no es el ancho de las columnas, sino la **consistencia de los huecos (gaps)** entre elementos.
- Usa una escala de espaciado estricta (ej. 4px, 8px, 16px, 24px) para separar tus componentes. Esto crea una sensación de orden y ritmo visual aunque no haya una rejilla de fondo.

## Comparativa: ¿Cuándo usar qué lógica?

| Decisión | Layout Grid | Intrinsic Layout |
| :--- | :--- | :--- |
| **Alineación** | Forzada a columnas fijas. | Alineación fluida y respirable. |
| **Adaptabilidad** | Puntos de ruptura (breakpoints) rígidos. | Adaptación continua y suave. |
| **Uso Ideal** | Landings, Portadas, Revistas Digitales. | Apps de Datos, Dashboards, Herramientas. |
| **Facilidad de Desarrollo** | Alta (Librerías estándar). | Alta (CSS moderno: Flexbox/Grid). |

## Beneficios para la Experiencia de Usuario

- **Legibilidad Garantizada:** El texto nunca se corta ni se solapa porque el contenedor siempre tiene el tamaño adecuado para albergarlo.
- **Diseño "Invisible":** La interfaz se siente natural y fluida, sin esos saltos bruscos que ocurren al redimensionar la ventana del navegador.
- **Resiliencia ante el Cambio:** Si mañana decides cambiar la tipografía a una más ancha, todo tu diseño se reajustará solo sin que tengas que mover píxeles a mano en 50 pantallas.

## Consejos de Mentor

- **Deja de dibujar "Frames" estáticos:** Si puedes construir algo con Auto Layout y que se redimensione solo, hazlo. Es el mejor ejercicio para entender la lógica de código real.
- **Prueba con Datos Reales:** Pide a los desarrolladores un volcado de datos reales con los nombres más largos posible. Mételos en tu diseño y mira dónde el Intrinsic Layout soluciona el problema y dónde necesitas añadir una regla de "truncamiento" (puntos suspensivos).
- **El Espacio en Blanco es tu Herramienta:** No intentes rellenar cada píxel de ancho. Un Intrinsic Layout sabe cuándo dejar aire para que el ojo del usuario descanse.

## Recursos y Herramientas

- **Jen Simmons:** [The New CSS Layout](https://www.youtube.com/watch?v=FEnRByQNNoA)
- **Every Layout:** [Algorithmic Layout Systems](https://every-layout.dev/)
- **Figma Blog:** [Auto Layout and Component Properties](https://www.figma.com/blog/auto-layout-and-resizing-logic/)
- **Artículos:** [Intrinsic Design vs Responsive Design](https://uxdesign.cc/intrinsic-design-vs-responsive-design-the-next-evolution-9a3e8e3e8e3)
---
[[intrinsic-sizing]]
[[layout-grid-vs-intrinsic]]
[[constraints-auto-layout]]
[[breakpoint-vs-container-queries]]


---

Source: https://www.fernandoux.com/es/wiki/tecnicas/intrinsic-layout-decisions/