CSS
Combina valores dinámicos con calc(), min(), max() y clamp() para definir tamaños fluidos, límites y relaciones adaptables sin media queries innecesarias.
Las funciones matemáticas permiten expresar relaciones que el navegador resuelve con el espacio real.
.page {
inline-size: min(100% - 2rem, 72rem);
}.sidebar {
inline-size: calc(100% - 18rem);
}Combina unidades compatibles. Los operadores + y - necesitan espacios para evitar ambigüedad.
width: calc(100%-2rem); /* inválido */
width: calc(100% - 2rem);width: min(100%, 40rem);Elige el menor valor resuelto. Es útil para imponer un máximo sin media query.
padding-inline: max(1rem, env(safe-area-inset-left));Elige el mayor valor y puede respetar safe areas.
font-size: clamp(1.75rem, 4vw, 3.5rem);clamp(mínimo, preferido, máximo)El valor preferido crece o disminuye, pero queda limitado.
font-size: clamp(
1.5rem,
1rem + 2vw,
3rem
);La fórmula debe revisarse en los extremos. Fluid no significa que cualquier tamaño intermedio sea legible.
gap: clamp(0.75rem, calc(0.5rem + 1vw), 2rem);calc() puede omitirse en varios contextos modernos porque otras funciones ya aceptan expresiones matemáticas.
Las capacidades matemáticas modernas continúan evolucionando. No dependas de operadores o funciones nuevas sin comprobar soporte objetivo; la forma estable más común sigue siendo multiplicar mediante custom properties y calc cuando los tipos son compatibles.
padding: calc(var(--space) * 2);margin-inline: calc(var(--gutter) * -1);Un cálculo válido puede producir negativo, pero la propiedad puede rechazarlo o limitarlo.
height: calc(100% - 2rem);Si el porcentaje necesita una altura definida y el containing block no la ofrece, el resultado puede no comportarse como esperas.
.wrapper {
width: min(100% - 2rem, 70rem);
margin-inline: auto;
}.grid {
grid-template-columns: repeat(
auto-fit,
minmax(min(100%, 16rem), 1fr)
);
}¿Qué devuelve clamp(1rem, 5vw, 3rem) cuando 5vw equivale a 4rem?
Devuelve 3rem porque el valor preferido supera el máximo.
Propiedades lógicas y writing modes expresa layout según el flujo del idioma.