Aprende a crear layouts y tipografías fluidas sin hacks usando funciones matemáticas nativas de CSS.
Las funciones matemáticas convierten CSS en un sistema dinámico que se adapta al espacio disponible.
Con <code>calc()</code> mezclas unidades; con <code>min()</code>, <code>max()</code> y <code>clamp()</code> estableces límites inteligentes.
Bien usadas, reducen media queries innecesarias y mejoran la coherencia de layouts fluidos.
Cada función resuelve un problema distinto.
Combina funciones para controlar ancho, padding y tipografía.
Un patrón típico: limitar ancho con <code>min()</code>, crear espaciados proporcionales con <code>clamp()</code> y reservar huecos con <code>calc()</code>.
Esto mantiene proporción visual estable en móviles, tablets y escritorio sin ramificar demasiado CSS.
Aprende a crear layouts y tipografías fluidas sin hacks usando funciones matemáticas nativas de CSS.
Código del tema: display: grid; gap: 1rem;
Cada función resuelve un problema distinto.
calc(): operaciones entre unidades compatibles.min(): escoge el valor más pequeño.max(): escoge el valor más grande.clamp(min, ideal, max): valor fluido con límites seguros..container { width: calc(100% - 2rem); }
.card { width: min(100%, 42rem); }
.sidebar { width: max(220px, 24vw); }
h1 { font-size: clamp(1.8rem, 1rem + 2vw, 3rem); }Combina funciones para controlar ancho, padding y tipografía.
Un patrón típico: limitar ancho con min(), crear espaciados proporcionales con clamp() y reservar huecos con calc().
Esto mantiene proporción visual estable en móviles, tablets y escritorio sin ramificar demasiado CSS.
.page {
width: min(100% - 2rem, 1200px);
margin-inline: auto;
}
.hero {
padding: clamp(1rem, 0.5rem + 2vw, 3rem);
}
.main {
min-height: calc(100vh - 72px);
}