Domina el tamaño intrínseco en CSS para que los componentes se adapten al contenido sin romper layouts.
El sizing intrínseco usa el tamaño natural del contenido para calcular anchos y altos más inteligentes.
Con <code>min-content</code>, <code>max-content</code> y <code>fit-content()</code> puedes crear cajas que ni se rompen ni desperdician espacio.
Es especialmente útil en botones, badges, tags y columnas de grid con contenido variable.
El contenido propone tamaño; CSS decide límites.
<code>min-content</code> intenta compactar al máximo sin desbordar palabras no rompibles.
<code>max-content</code> expande para mostrar el contenido en una sola línea cuando puede.
<code>fit-content()</code> se queda con el tamaño ideal, pero respeta un máximo.
Combina sizing intrínseco con tracks elásticos.
En Grid puedes mezclar una columna de contenido intrínseco con otra flexible usando <code>minmax()</code>.
Esto evita que labels largos rompan el layout o que columnas queden excesivamente grandes.
Domina el tamaño intrínseco en CSS para que los componentes se adapten al contenido sin romper layouts.
Código del tema: display: grid; gap: 1rem;
El contenido propone tamaño; CSS decide límites.
min-content intenta compactar al máximo sin desbordar palabras no rompibles.
max-content expande para mostrar el contenido en una sola línea cuando puede.
fit-content() se queda con el tamaño ideal, pero respeta un máximo.
.chip { width: max-content; }
.card-title { width: min-content; }
.pill { width: fit-content(20rem); }Combina sizing intrínseco con tracks elásticos.
En Grid puedes mezclar una columna de contenido intrínseco con otra flexible usando minmax().
Esto evita que labels largos rompan el layout o que columnas queden excesivamente grandes.
.layout {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: 1rem;
}Complementa sizing intrinseco con el contexto de unidades mas util en produccion.
